JS实现无缝循环marquee滚动效果

无缝循环marquee滚动JS代码实现，兼容IE,FireFox,Chrome，供大家参考，具体内容如下首先是CSS和H

无缝循环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");
 }
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

js marquee 滚动