JS实现⽆缝循环marquee滚动效果⽆缝循环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" >
<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 = ElementById('marquee_zxd');
var MyMar = setInterval(function(){
scrolleft(aaa);
}, 20);
//⿏标移上时清除定时器达到滚动停⽌的⽬的
//⿏标移开时重设定时器
scrolleft(aaa);
}, 20);};
}
/**Chrome定时器循环函数，通过relative布局的left属性控制滚动*/
function scrolleftChrome($marquee_inner, inner_width){
html滚动效果代码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 = ElementById('marquee_zxd');
//⿏标移上时清除定时器达到滚动停⽌的⽬的
useover=function() {clearInterval(MyMar);};
//⿏标移开时重设定时器
useout=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");
}
});
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。