JavaScript 時間間隔和暫停及scrollleft的簡單應用
阿新 • • 發佈：2019-02-15
<該應用的效果是：一箇中間數字連續增加的span文字(可以更換成圖片)在介面中左右無間斷連續橫移，到了介面左邊則向右橫移，到了介面右邊則向做橫移>
<文中使用了scrollLeft 屬性：該屬性是滾動條距離介面左邊的距離>
| <html> |
| <head> |
| <title>飄來飄去</title> |
| <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <!--此處定義移動的div塊的相關屬性--> |
| <style> |
| #sp1{ |
| display: inline-block; |
| border: 1px solid red; |
| font-size: 20px; |
| width: 80px; |
| height: 30px; |
| text-align: center; |
| background-color: lightblue; |
| } |
| </style> |
| <style> <!--此處定義此處定義橫移元素所在的外層、裡層div塊的相關屬性--> |
| #outer{ |
| overflow:hidden; width:100%;margin:20px auto;height:100%; |
| } |
| #inner{ |
| height:100%;width:100%;margin: 0px 0px 0px 1360px; |
| } |
| </style> |
| <script> <!--定義2個變數來接收暫停ID--> |
| var intervalid,intervalid1; <!--編寫向左橫移函式（其作用是使平移元素向左橫移，到了外層div塊最左邊則向右橫移）--> |
| function moveleft(){ |
| if(document.getElementById("outer").scrollLeft<=1350){ |
| document.getElementById("outer").scrollLeft+=3; |
| }else{ |
| clearInterval(intervalid); |
| intervalid1 = setInterval(moveright,20); |
| } |
| } <!--編寫向右橫移函式（其作用是使平移元素向右橫移，到了外層div塊最左邊則向左橫移）--> |
| function moveright(){ |
| if(document.getElementById("outer").scrollLeft>=100){ |
| document.getElementById("outer").scrollLeft-=3; |
| }else{ |
| clearInterval(intervalid1); |
| intervalid = setInterval(moveleft,20); |
| } |
| } <!--該函式是使元素中數字不斷增加的函式--> |
| function start(){ |
| var sp1 = document.getElementById("sp1"); |
| sp1.innerHTML = parseInt(sp1.innerHTML)+1+"px"; |
| } |
| intervalid = setInterval(moveleft,20); |
| setInterval(start,1000); |
| </script> |
| </head> |
| <body> |
| <div id="outer"> |
| <div id="inner"> |
| <span id="sp1">0px</span><br/> |
| </div> |
| </div> |
| </body> |
| </html> |