html5实现无缝滚动的效果,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;

}

下面是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.οnmοuseοver=function() {clearInterval(MyMar);};

//鼠标移开时重设定时器

aaa.οnmοuseοut=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.οnmοuseοver=function() {clearInterval(MyMar);};

//鼠标移开时重设定时器

marquee_zxd.οnmοuseοut=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");

}

});

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