mouseleave不能正常工作，因为它应该是

当您将鼠标悬停在鼠标上时，我使用mouseenter和mouseleave放大图像。如果鼠标移动太快，mouseleave不起作用，放大的图像仍然存在。mouseleave不能正常工作，因为它应该是

$(document).ready(function() { 
    $('.productImg').bind('mouseenter', function(){ 
     if(!$('#zoom_product_image').length){ 
      var maxWidth=$(this).parents('form').width(); 
      var maxHeight=$(this).parents('form').height(); 

      var link=this.src.replace(/small/g, 'big'); 
      $(this).parents('form').append('<img id="zoom_product_image" style="display: none;" src="'+link+'">'); 
      var img=new Image(); 
      img.onload=function(){ 
       $('#zoom_product_image').css({'position': 'absolute', 'border': '1px solid #78C7FF', 'top': '0px', 'left': '0px', 'z-index': '10000', 'opacity': '0.95', 'cursor': 'pointer'}); 
       $('#zoom_product_image').fadeIn(200); 

       if($('#zoom_product_image').width()>maxWidth){ 
        $('#zoom_product_image').css({'width': maxWidth, 'height': $('#zoom_product_image').height()*(maxWidth/$('#zoom_product_image').width())}); 
       } 
       if($('#zoom_product_image').height()>maxHeight){ 
        $('#zoom_product_image').css({'height': maxHeight, 'width': $('#zoom_product_image').width()*(maxHeight/$('#zoom_product_image').height())}); 
       } 
      } 
      img.src=link; 

      $('#zoom_product_image').bind('mouseleave', function(){ 
       $('#zoom_product_image').detach(); 
      }); 

      $('#zoom_product_image').bind('click', function(){ 
       window.location.href=$('#zoom_product_image').parent().find('.bigtitle').attr('href'); 
      }); 
     } 
    }); 
});

来源

2012-10-04 Luntegg

您可能需要在'mouseenter'事件之外移动'mouseleave'和'click'事件。 – Chase

没有帮助... – Luntegg

您是否碰巧在http://jsfiddle.net/上有一个工作示例，如果不是，您是否可以创建一个简单的示例来显示您所遇到的内容？ – Chase

$(document).ready(function() { 
    $('.productImg').bind('mouseenter', function(){ 
     if($('#zoom_product_image').length) 
      $('#zoom_product_image').detach(); 

     var maxWidth=$(this).parents('form').width(); 
     var maxHeight=$(this).parents('form').height(); 

     var link=this.src.replace(/small/g, 'big'); 
     $(this).parents('form').append('<img id="zoom_product_image" style="display: none;" src="'+link+'">'); 
     var img=new Image(); 
     img.onload=function(){ 
       $('#zoom_product_image').css({'position': 'absolute', 'border': '1px solid #78C7FF', 'top': '0px', 'left': '0px', 'z-index': '10000', 'opacity': '0.95', 'cursor': 'pointer', 'display': 'block'}); 

       if($('#zoom_product_image').width()>maxWidth){ 
        $('#zoom_product_image').css({'width': maxWidth, 'height': $('#zoom_product_image').height()*(maxWidth/$('#zoom_product_image').width())}); 
       } 
       if($('#zoom_product_image').height()>maxHeight){ 
        $('#zoom_product_image').css({'height': maxHeight, 'width': $('#zoom_product_image').width()*(maxHeight/$('#zoom_product_image').height())}); 
       } 
     } 
     img.src=link; 

     $(this).parents('form').bind('mouseleave', function(){ 
      $('#zoom_product_image').detach(); 
     }); 

     $('#zoom_product_image').bind('click', function(){ 
      window.location.href=$('#zoom_product_image').parent().find('.bigtitle').attr('href'); 
     }); 
    }); 
});

来源

2012-10-28 13:31:32 Luntegg

还可以考虑先加载图像，然后在加载后绑定事件。

另一个技巧是使用jQuery的悬停功能（工作原理相同，除了它可能是比较容易读）：

$(".productImg").hover(
    function() { 
     // do mouse enter things 
    }, 
    function() { 
     // do mouse leave things 
    } 
);

，并把这个onload事件中：

img.onload = function() { 
    $(".productImg").hover(..); 
};

来源

2012-10-04 13:44:45 strmstn

试过了，没有帮助。 – Luntegg

mouseleave不能正常工作，因为它应该是

回答

相关问题