时间:2021-05-26
无缝循环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" 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"/> </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 = 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"); }});以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
div+css+javascript实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox用marquee实现首尾相连循环滚动效果(仅IE):复制代
复制代码代码如下:分别用marquee和div+js实现首尾相连循环滚动效果用marquee实现首尾相连循环滚动效果(仅IE):这里是要滚动的内容用DIV+ja
js替代marquee实现图片无缝滚动可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面
本文实例为大家分享了js无缝循环滚动实现代码,供大家参考,具体内容如下1、图片格式:260*400.2、使用循环定时器轻松实现无缝滚动.row{width:12
我们会看到很多的网站上会使用多张图片无缝滚动的效果。下面我就介绍几种纯JS实现多张图片的无缝滚动,并实现鼠标移到图片上运动停止的效果,可以控制图片左右滚动。1.