JS实现无缝循环marquee滚动效果
无缝循环marquee滚动JS代码实现，兼容IE,FireFox,Chrome，供大家参考，具体内容如下
首先是CSS和HTML如下:
#marquee_zxd{
border:1pxsolidred;
white-space:nowrap;
overflow:hidden;
width:500px;
padding-top:5px;
}
#marquee_zxdimg{
height:100px;
}
下面是JS实现marquee_zxd.js：
/**除了Chrome以外的浏览器可以通过scrollLeft属性控制滚动*/
functionscrolleft(obj){
var$obj=$(obj);
//到右边顶端后不会再变
//vartemp=obj.scrollLeft;
//obj.scrollLeft++;
vartemp=$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()滚动*/
functioninitMarquee(){
varaaa=document.getElementById('marquee_zxd');
varMyMar=setInterval(function(){
scrolleft(aaa);
},20);
//鼠标移上时清除定时器达到滚动停止的目的
aaa.onmouseover=function(){clearInterval(MyMar);};
//鼠标移开时重设定时器
aaa.onmouseout=function(){MyMar=setInterval(function(){
scrolleft(aaa);
},20);};
}
/**Chrome定时器循环函数，通过relative布局的left属性控制滚动*/
functionscrolleftChrome($marquee_inner,inner_width){
varwidth=parseInt(inner_width);
varleftPx=$marquee_inner.css("left");
//兼容IE
if(leftPx=='auto')
leftPx=0;
//位置左移
varleft=parseInt(leftPx);
left=left-1;
//到顶归位
if(left<=-width)
left=0;
$marquee_inner.css("left",left);
//console.log(width+","+left);
}
/**Chrome浏览器可以通过scrolleftChrome滚动*/
functioninitMarqueeChrome(){
//局部变量不污染全局变量空间
var$marquee_inner=$('#marquee_inner');
//原内容大小
varinner_width=$marquee_inner.css('width');
//复制一份原内容
varinnerHtml=$marquee_inner.html();
$marquee_inner.html(innerHtml+innerHtml);
console.log(inner_width);
//参数采用字符串形式的缺陷：参数不能被周期性改变,参数必须是全局变量
//varMyMar=setInterval("scrolleftChrome($marquee_inner,inner_width)",5000);
varMyMar=setInterval(function(){
//参数不污染全局变量空间
scrolleftChrome($marquee_inner,inner_width);
},50);
varmarquee_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(){
varua=window.navigator.userAgent;
varisIE=window.ActiveXObject!=undefined&&ua.indexOf("MSIE")!=-1;
varisFirefox=ua.indexOf("Firefox")!=-1;
varisChrome=ua.indexOf("Chrome")&&window.chrome;
if(isChrome){
initMarqueeChrome();
console.log("isChrome:initMarqueeChrome");
}else{
initMarquee();
console.log("isChrome:initMarquee");
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。