1

链接:: http://amatrans.com.previewyoursites.com/

下面的脚本是为滑块编写的，它在 Firefox 中可以正常工作，但不能在

Chrome（鼠标悬停和鼠标离开它会产生白色闪光）和

IE（为悬停占用过多的第一次加载）

任何人都可以帮助我吗

<script type="text/javascript">
        jQuery(".slides li").each(function(){
            var oldurl =  jQuery(this).css('background-image');
            var imageUrl =  jQuery(this).find('.bw_img').html();
            jQuery(this).css('background-image', 'url(' + imageUrl + ')');
            jQuery(this).find('.bw_img').html(oldurl);
        }).mouseenter(function(){
            var oldurl =  jQuery(this).css('background-image');
            var imageUrl =  jQuery(this).find('.bw_img').html();
            jQuery(this).css('background-image', imageUrl);
            jQuery(this).find('.bw_img').html(oldurl);
        }).mouseleave(function() {
            var oldurl =  jQuery(this).css('background-image');
            var imageUrl =  jQuery(this).find('.bw_img').html();
            jQuery(this).css('background-image', imageUrl);
            jQuery(this).find('.bw_img').html(oldurl);
        });
</script>

（实际上我想要正常的黑色图像和鼠标悬停的彩色图像）

4

3 回答 3

1

您可以将图像预加载到隐藏的容器中，这样在更改背景时就不会出现闪烁。

$(document).ready(function () {
    var container = $('<div id="preloader" />').css('display', 'none').appendTo($(document.body));
    $('<img />').src(imageUrl).appendTo(container);
});
于 2012-10-23T14:29:32.887 回答
1

当黑白图像被隐藏并显示彩色图像时，似乎会发生闪光。由于您使用的是大型 CSS 背景图像，因此这将是难以避免的。

我建议重新调整您的代码以使用绝对定位的内联图像。然后，您可以简单地在黑白图像上显示彩色图像，而完全不删除黑白图像。

于 2012-10-23T14:29:40.803 回答
1

我同意康斯坦丁重新。预加载图像 - 这可能是一个瓶颈。第二件事是您通过迭代所有<li>元素并将事件附加到它们来创建大量闭包。你最好使用jQueryon方法，例如：

jQuery(".slides li").on("mouseenter", function() {
  // your mouseenter code
}).on("mouseleave", function() {
  // other code
});

这将更加节省内存。

编辑：对于这个特定的用例，您可以依赖 CSS：

.slides li:hover { filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}
于 2012-10-23T14:36:29.613 回答