標籤：左右 timeout 圖片 tab 介面 color cti ble 網頁
在製作網頁中會有許多的動態效果，這裡就列舉一個圖片在介面不停的左右移動的動態效果代碼：根據這代碼我們可以實現許多的不同效果。
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| body{ | |
| margin: 0; | |
| } | |
| #div1{ | |
| width: 50px; | |
| height: 50px; | |
| background-color: red; | |
| position: absolute; | |
| /*left: 100px;*/ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button onclick="mymove()">移動</button> | |
| <button onclick="getjiemian()">介面</button> | |
| <hr/> | |
| <div id="div1"></div> | |
| <script> | |
| function getjiemian(){ | |
| alert(document.body.offsetWidth); | |
| } | |
| var num = 2; | |
| function mymove(){ | |
| var div1 = document.getElementById(‘div1‘); | |
| // alert(div1.offsetLeft+‘,,‘+div1.offsetTop); | |
| // 元素的style屬性無法擷取style標記中設定的值,而僅僅只能讀取style屬性的值 | |
| div1.style.left = div1.offsetLeft + num + ‘px‘; | |
| if(div1.offsetLeft+div1.offsetWidth>=document.body.offsetWidth | |
| || div1.offsetLeft<=0) | |
| num = -num; | |
| window.setTimeout(mymove, 20); | |
| } | |
| </script> | |
| </body> | |
| </html> |
圖片在介面的移動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
