Cloud Zoom 和 jQuery mouseleave()

发布于 2025-01-08 01:55:14 字数 824 浏览 0 评论 0原文

我正在使用 Cloud Zoom 创建用于产品查看的缩放功能，并且我想要激活鼠标单击时的缩放（效果很好），但是当我尝试添加功能以关闭鼠标离开时的缩放时，会出现这些“故障”，我似乎无法理解 - 如果我离开容器我可以非常缓慢地初始化区域触发关闭脚本。但是，如果我将鼠标相当快地拖动到页面的其他部分，则什么也不会发生。

HTML

<div id="product-image">
  <a href="images/product-sample-zoom.jpg" class="cloud-zoom" rel="adjustX: 10, adjustY: -4"><img src="images/product-sample.jpg"></a>
</div>

var $zoomInit = false;
$('.cloud-zoom').click(function(e) {
  $('.cloud-zoom').CloudZoom({ showTitle: false });
  $zoomInit = true;
  e.preventDefault();
});
$('#product-image').mouseout(function() {
  if ($zoomInit == true) {
    $('.cloud-zoom').data('zoom').destroy();
    $zoomInit = false;
  }
});

原文

I'm creating a zoom function for product viewing using Cloud Zoom and I want to activate the zoom on mouse click (which works fine), however when I try and add functionality to close the zoom on mouse leave there are these 'glitches' that I can't seem to get my head around - If I leave the container for the init area very slowly I can trigger the closing script. But if I drag the mouse rather fast to another part of the page nothing happens.

HTML

<div id="product-image">
  <a href="images/product-sample-zoom.jpg" class="cloud-zoom" rel="adjustX: 10, adjustY: -4"><img src="images/product-sample.jpg"></a>
</div>

var $zoomInit = false;
$('.cloud-zoom').click(function(e) {
  $('.cloud-zoom').CloudZoom({ showTitle: false });
  $zoomInit = true;
  e.preventDefault();
});
$('#product-image').mouseout(function() {
  if ($zoomInit == true) {
    $('.cloud-zoom').data('zoom').destroy();
    $zoomInit = false;
  }
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

溺渁∝ 2025-01-15 01:55:14

我遇到了完全相同的问题。

在 cloud-zoom.1.0.2.min.js 中查找此函数：（

如果它被缩小，只需搜索“mouseleave”，只有一个函数。）

$mouseTrap.bind('mouseleave',this,function(event){
    clearTimeout(controlTimer);
    if(lens){
        lens.fadeOut(299)
    }
    if($tint){
        $tint.fadeOut(299)
    }if(softFocus){
        softFocus.fadeOut(299)
    }
    zoomDiv.fadeOut(300,
        function(){
            ctx.fadedOut()
        });
    return false
});

返回 false 似乎是问题所在。删除它或使用“event.preventDefault();”相反有效。

I had thew exact same problem.

in the cloud-zoom.1.0.2.min.js look for this function:

(if it's minified just search for "mouseleave", there is only one function.)

$mouseTrap.bind('mouseleave',this,function(event){
    clearTimeout(controlTimer);
    if(lens){
        lens.fadeOut(299)
    }
    if($tint){
        $tint.fadeOut(299)
    }if(softFocus){
        softFocus.fadeOut(299)
    }
    zoomDiv.fadeOut(300,
        function(){
            ctx.fadedOut()
        });
    return false
});

Returning false seems to be the problem. Removing it or using "event.preventDefault();" instead works.

回复收藏 0 原文

~没有更多了~