在制作网页中会有许多的动态效果，这里就列举一个图片在界面不停的左右移动的动态效果代码：根据这代码我们可以实现许多的不同效果。
| <!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> |
时间： 2024-10-11 17:30:17