Question

我在html列表标签中有几个相距5个像素的缩略图（间距）。我还有他们的mouseenter和mouseleave事件的Jquery监听器，它们根据正在翻转的缩略图更新父图像。

如果从一个缩略图图像滚动到另一个缩略图图像，则转换不平滑。当鼠标处于5像素间距时，父图像会快速跳转到其默认值，然后在光标移过它时返回到下一个缩略图。

如何使其平滑，使其从图像到图像，而不会跳回到默认的父图像。

我尝试将间距设为填充，但设计在图像周围有边框，这使它看起来很糟糕。

谢谢！

EDIT。 - ＆gt;代码请求

$image_changer = $('.imageChanger');
$image_changer.each(function(){
$(this).mouseenter(function(){
    $backup_old_image = $('.product-img-box .product-image img').attr('src');
    $('.product-img-box .product-image img').attr('src', $(this).attr('src'));
});
});
$image_changer.mouseleave(function(){
    $('.product-img-box .product-image img').attr('src', $backup_old_image);
});

产品页面上的示例.. http://www.greencupboards.com/loyal-luxe-the-canadian-cabin-15706.html

Answer 1

使用包装器或将填充和鼠标悬停事件触发器放在li元素

上

<li style="padding:5px">
   <img href="content.png" alt="content">
</li>

$("li").hover(function(){},function(){})

修改

看到网站后：

变化

#main-content .more-views ul li {
  float: left;
}

到

#main-content .more-views ul li {
  padding-right: 5px;
  float: left;
}

并摆脱图像上的边距。

然后将jQuery更改为

$image_changer = jQuery('.more-views li');
$image_changer.each(function(){
jQuery(this).mouseenter(function(){
    $backup_old_image = jQuery('.product-img-box .product-image img').attr('src');
    jQuery('.product-img-box .product-image img').attr('src', jQuery(this).find("img").attr('src'));
});
});
$image_changer.mouseleave(function(){
    jQuery('.product-img-box .product-image img').attr('src', $backup_old_image);
});

Jquery / Javascript缩略图图像问题

1 个答案:

修改