这篇文章主要为大家详细介绍了js实现无缝循环marquee滚动效果，兼容ie, firefox, chrome，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
无缝循环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 -->
<p id="marquee_zxd"><span>
<!-- 内嵌一个p很重要，里面的元素必须是一个整体的移动。另外横移时，必须是行级元素只占自己的空间。 -->
<p 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"/>
</p>
</span></p>
<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");
}
});
【相关推荐】
1. javacript免费视频教程
2. js实现上传图片并且能够预览的实例详解
3. 移动端手指放大缩小插件代码详解
4. bootstrap手风琴折叠的教程详解
5. bootstrap模态框远程实例详解
以上就是js实现marquee滚动效果的实例详解的详细内容。