原生javascript實現的圖片無縫滾動程式碼分析
由於無縫滾動效果應用非常的頻繁,所以有必要對其有明確的掌握,下面就通過程式碼例項詳細介紹一下圖片無縫滾動效果的實現過程,希望能夠給需要的朋友帶來幫助,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0px; padding:0px; } #demo{ background:#FFF; overflow:hidden; border:1px dashed #CCC; width:300px; margin:0px auto; } #demo img{border:3px solid #F2F2F2;} #indemo{ float:left; width:800%; } #demo1{ float:left; } #demo2{ float:left; } ul li{ list-style:none; width:50px; height:50px; background-color:green; float:left; margin-left:5px; text-align:center; line-height:50px; } </style> <script type="text/javascript"> window.onload=function(){ var speed=10; var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab2.offsetWidth-tab.scrollLeft<=0){ tab.scrollLeft-=tab1.offsetWidth } else{ tab.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; } </script> </head> <body> <div id="demo"> <div id="indemo"> <div id="demo1"> <ul style="overflow:hidden;"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div id="demo2"></div> </div> </div> </body> </html>
以上程式碼實現了我們的要求,實現了圖片無縫滾動效果,當然這裡的圖片是用數字代替的,在實際應用中替換為圖片就可以了,下面介紹一下它的實現過程。
一.實現原理:
[HTML] 純文字檢視 複製程式碼<div id="demo"> <div id="indemo"> <div id="demo1"> <ul style="overflow:hidden;"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div id="demo2"></div> </div> </div>
以上程式碼是滾動結構,在執行的開始,會將demo1中的內容複製一份放到demo2中,這樣就形成了兩個完全相同的圖片內容頭尾相接的情況,然後控制indemo進行滾動,當demo1的內容滾動完畢的時候,demo2中的圖片內容就位於原來demo1中圖片內容開始滾動的位置,這樣是一輪完整的滾動,實現了無縫效果,然後再將indemo的位置重置起始狀態,這樣就完成了不間斷無縫滾動效果。
二.相關閱讀:
1.innerHTML屬性可以參閱js innerHTML一章節。
2.offsetWidth屬性可以參閱JavaScript offsetWidth一章節。
3.scrollLeft屬性可以參閱js scrollLeft一章節。
4.setInterval()函式可以參閱JavaScript setInterval()一章節。
5.clearInterval()函式可以參閱JavaScript clearInterval()一章節。
相關文章
- 原生javascript實現的水平圖片無縫滾動效果JavaScript
- js程式碼實現的圖片水平無縫滾動JS
- JQuery實現圖片輪播無縫滾動jQuery
- JavaScript水平無縫滾動程式碼JavaScript
- JavaScript圖片橫向無縫滾動詳解JavaScript
- jQuery圖片無縫滾動效果jQuery
- javascript實現圖片滾動JavaScript
- JS圖片滾動(無縫、平滑、上下左右滾動)效果JS
- jQuery 圖片列表垂直間歇無縫滾動jQuery
- JavaScript無縫滾動 記錄JavaScript
- CSS實現迴圈無縫滾動CSS
- 直播系統原始碼,vue實現無縫滾動原始碼Vue
- 邏輯難理解版本的輪播圖(實現無縫滾動)
- react無縫滾動輪播圖React
- JavaScript 垂直新聞公告無縫滾動JavaScript
- C#資訊無縫滾動顯示程式碼C#
- js無縫滾動JS
- jquery實現的垂直或者水平無縫滾動外掛jQuery
- js文字橫向無縫滾動程式碼例項JS
- CSS 水平無縫滾動CSS
- 無縫迴圈滾動
- JavaScript垂直新聞公告無縫滾動詳解JavaScript
- js、jQuery實現文字上下無縫輪播、滾動效果JSjQuery
- jQuery 間歇的無縫滾動jQuery
- 怎樣用原生js配合css的transition寫個無縫滾動JSCSS
- 原生JS利用transform實現banner的無限滾動JSORM
- H5移動端獲獎無縫滾動動畫實現H5動畫
- js實現的單行文字不間斷無縫滾動效果JS
- js-字幕無縫滾動JS
- CSS水平無縫滾動效果CSS
- vue.js無縫滾動Vue.js
- 左右無縫輪播圖的實現
- HTMl 中marquee標籤實現無縫滾動跑馬燈效果HTML
- 向上無縫滾動--原理及思想
- 原生JS實現一個無縫輪播圖外掛(支援vue)JSVue
- 10行程式碼實現頁面無限滾動行程
- JavaScript圖片裁剪的無變形實現方法JavaScript
- js實現圖片上下滾動background-positionJS