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

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

首先是CSS和HTML如下:

rush:xhtml;"> #marquee_zxd { border: 1px solid red; white-space: Nowrap; overflow: hidden; width: 500px; padding-top: 5px;

}

marquee_zxd img {

height: 100px;

}

<div id="marquee_zxd"&gt;<span>
  <!-- 内嵌一个div很重要，里面的元素必须是一个整体的移动。另外横移时，必须是行级元素只占自己的空间。 -->
  <div id="marquee_inner" style="position:relative; <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: inline-block;"&gt;
  <img src="img/duck.png"/&gt;
  <img src="img/donkey.png"/&gt;
  <img src="img/eggbird.png"/&gt;
  <img src="img/elephant.png"/&gt;
  <img src="img/butterfly.png"/&gt;
</div>
</span></div>

<script type="text/javascript" src="${cpath}/js/marquee_zxd.js">

下面是JS实现marquee_zxd.js：

= 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,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");
}
});

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