您好,登錄后才能下訂單哦!
這篇文章主要介紹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 = 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"); } });
以上是“JS如何實現無縫循環marquee滾動效果”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。