JS实现无缝循环marquee滚动效果
更新时间:2017年05月22日 09:08:30 作者:rosyouth
这篇文章主要为大家详细介绍了JS实现无缝循环marquee滚动效果,兼容IE, FireFox, Chrome,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
无缝循环marquee滚动JS代码实现,兼容IE, FireFox, Chrome,供大家参考,具体内容如下
首先是CSS和HTML如下:
#marquee_zxd { border: 1px solid red; white-space: nowrap; overflow: hidden; width: 500px; padding-top: 5px; } #marquee_zxd img { height: 100px; } <!-- 横向一定要是span --> <div id="marquee_zxd"><span> <!-- 内嵌一个div很重要,里面的元素必须是一个整体的移动。另外横移时,必须是行级元素只占自己的空间。 --> <div id="marquee_inner" style="position:relative; display: inline-block;"> <img src="img/duck.png"/> <img src="img/donkey.png"/> <img src="img/eggbird.png"/> <img src="img/elephant.png"/> <img src="img/butterfly.png"/> </div> </span></div> <script type="text/javascript" src="${cpath}/js/marquee_zxd.js"></script>
下面是JS实现marquee_zxd.js:
/**除了Chrome以外的浏览器可以通过scrollLeft属性控制滚动*/ function scrolleft(obj){ var $obj = $(obj); //到右边顶端后不会再变 //var temp = obj.scrollLeft; //obj.scrollLeft++; var temp = $obj.scrollLeft(); //console.log(temp); $obj.scrollLeft(temp+1); //当滚动条到达右边顶端时;或本身长度不够不好滚动(漫出才好滚) //if(obj.scrollLeft == temp){ if($obj.scrollLeft() == temp){ obj.innerHTML += obj.innerHTML; console.log('copy'); } //当滚动条滚动了初始内容的宽度时,滚动条回到最左端,模拟循环 //if (obj.scrollLeft >= obj.firstChild.offsetWidth) // obj.scrollLeft = 0; if ($obj.scrollLeft() >= obj.firstChild.offsetWidth) $obj.scrollLeft(0); } /**除了Chrome以外的浏览器可以通过scrolleft()滚动*/ function initMarquee(){ var aaa = document.getElementById('marquee_zxd'); var MyMar = setInterval(function(){ scrolleft(aaa); }, 20); //鼠标移上时清除定时器达到滚动停止的目的 aaa.onmouseover=function() {clearInterval(MyMar);}; //鼠标移开时重设定时器 aaa.onmouseout=function() {MyMar = setInterval(function(){ scrolleft(aaa); }, 20);}; } /**Chrome定时器循环函数,通过relative布局的left属性控制滚动*/ function scrolleftChrome($marquee_inner, inner_width){ var width = parseInt(inner_width); var leftPx = $marquee_inner.css("left"); //兼容IE if(leftPx == 'auto') leftPx = 0; //位置左移 var left = parseInt(leftPx); left = left - 1; //到顶归位 if(left <= -width) left = 0; $marquee_inner.css("left", left); //console.log(width + ", " + left); } /**Chrome浏览器可以通过scrolleftChrome滚动*/ function initMarqueeChrome() { //局部变量不污染全局变量空间 var $marquee_inner = $('#marquee_inner'); //原内容大小 var inner_width = $marquee_inner.css('width'); //复制一份原内容 var innerHtml = $marquee_inner.html(); $marquee_inner.html(innerHtml + innerHtml); console.log(inner_width); //参数采用字符串形式的缺陷:参数不能被周期性改变,参数必须是全局变量 //var MyMar = setInterval("scrolleftChrome($marquee_inner, inner_width)", 5000); var MyMar = setInterval(function(){ //参数不污染全局变量空间 scrolleftChrome($marquee_inner, inner_width); }, 50); var marquee_zxd = document.getElementById('marquee_zxd'); //鼠标移上时清除定时器达到滚动停止的目的 marquee_zxd.onmouseover=function() {clearInterval(MyMar);}; //鼠标移开时重设定时器 marquee_zxd.onmouseout=function() { //参数采用字符串形式的缺陷:参数不能被周期性改变,参数必须是全局变量 //MyMar = setInterval("scrolleftChrome($marquee_inner, inner_width)", 50); MyMar = setInterval(function(){ //参数不污染全局变量空间 scrolleftChrome($marquee_inner, inner_width); }, 50); }; } $(function(){ var ua = window.navigator.userAgent; var isIE = window.ActiveXObject != undefined && ua.indexOf("MSIE") != -1; var isFirefox = ua.indexOf("Firefox") != -1; var isChrome = ua.indexOf("Chrome") && window.chrome; if(isChrome){ initMarqueeChrome(); console.log("isChrome: initMarqueeChrome"); }else{ initMarquee(); console.log("isChrome: initMarquee"); } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
javascript+HTML5的Canvas实现Lab单车动画效果
这篇文章主要介绍了javascript+HTML5的Canvas实现Lab单车动画效果,涉及javascript使用Canvas配合数学运算实现自行车动画效果,需要的朋友可以参考下2015-08-08JavaScript 映射器 array.flatMap()
这篇文章主要介绍了JavaScript 映射器 array.flatMap(),array.flatMap()是一个映射函数,它接收一个数组和一个映射函数,然后返回一个新的映射数组,下面进入文章了解具体内容2022-02-02js 动态添加元素(div、li、img等)及设置属性的方法
下面小编就为大家带来一篇js 动态添加元素(div、li、img等)及设置属性的方法。小编觉得听不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-07-07
最新评论