我正在尝试删除Chrome中的闪烁和FF,尽管它在FF中更少.
该脚本根据水平鼠标位置滚动20个背景jpg.
这种作品但非常闪烁.
该脚本根据水平鼠标位置滚动20个背景jpg.
这种作品但非常闪烁.
jQuery的
$( document ).ready( function() { var xSlider = $("#third"); //cache var loopvar = 10; //set start img to 10 xSlider.css({backgroundImage : 'url(images/' + loopvar + '.jpg)'}); document.onmousemove = function(e){ var mouseposimg = Math.floor(e.pageX / Math.floor($(window).width() / 20) + 1); if (mouseposimg > 20) { mouseposimg = 21; } //if outside browser if (mouseposimg < 0) { mouseposimg = 1; } if(loopvar != mouseposimg) { xSlider.css({backgroundImage : 'url(images/' + mouseposimg + '.jpg)'}); loopvar = mouseposimg; } };
});
CSS
#third{ background: no-repeat 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
HTML
<div id="third"> </div>
忘了提我用这个预加载
(function(d){var h=[];d.loadImages=function(a,e){"string"==typeof a&&(a=[a]);for(var f=a.length,g=0,b=0;b<f;b++){var c=document.createElement("img");c.onload=function(){g++;g==f&&d.isFunction(e)&&e()};c.src=a[b];h.push(c)}}})(jQuery);
$.loadImages([‘1.jpg’,’2.jpg’等等等))
解决方法
闪烁可能是由于图像加载造成的.您可以预加载所有图像以防止这种情况:
for (var x = 1; x <= 21; x++) { (new Image).src = 'images/' + x + '.jpg'; }
原文地址:https://www.jb51.cc/jquery/178352.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。