當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript制作网页动画
生活随笔
收集整理的這篇文章主要介紹了
JavaScript制作网页动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼如下
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>window對象</title><script type="text/javascript">//定義幾個全局變量var w;//頁面的寬度var img;//圖像對象var imgLeft;//圖像左邊的位置var imgWidth;//圖像的寬度var delta=5;//每次移動的距離window.onload=function(){//對四個變量賦初值w=window.innerWidth;img=document.getElementById("img");imgLeft=img.offsetLeft;imgWidth=img.width;//調用move()方法，改變圖片位置move();};function move(){//判斷圖像是否越界（超出頁面的寬度）if(imgLeft<0||imgLeft+imgWidth>w){delta=-delta;//變號}img.style.left=imgLeft+delta+"px";//移動位置后，需要重新修改左邊的位置imgLeft=img.offsetLeft;//重復不斷的調用次函數setTimeout(move,5);}</script><style type="text/css">#img{position: absolute;left: 0;top: 50%;}</style></head><body><img src="img/img6.jpg" id="img" /></div></body> </html>素材：
總結
以上是生活随笔為你收集整理的JavaScript制作网页动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据学习（十）-假设检验
- 下一篇： 构建工具 | Gulp压缩JavaScr