js实现动图效果

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js实现动图效果</title>
 6     <style>
 7         #man{
 8             position: absolute;
 9             left: 20px;
10             height: 50px;
11         }
12         #codingman{
13             position: absolute;
14             left: 20px;
15             top: 250px;
16         }
17     </style>
18     <script>
19         window.onload = function () {
20             //设置定时器不停的切换图片
21             var count = 0;
22             var man = document.getElementById("man");
23             setInterval(function () {
24                 man.src = "running/runner"+count+".jpg";
25                 count++;
26                 if(count == 6){
27                     count = 0;
28                 }
29             }, 100);
30 
31             //一直改变img 的left   变大
32             setInterval(function () {
33                 //拿到图片在屏幕上的位置
34                 var left = parseInt(getStyle(man,"left"));
35                 //计算位置
36                 var next = left + 30;
37                 //设置边界
38                 //window.innerWidth当前窗口的宽度
39                 if(next >= window.innerWidth){
40                     next = -95;
41                 }
42                 man.style.left = next+"px";
43             }, 100);
44 
45             var countman = 0;
46             var codingman = document.getElementById("codingman");
47             setInterval(function () {
48                 codingman.src = "running/running"+countman+".png";
49                 countman++;
50                 if(countman == 4){
51                     countman = 0;
52                 }
53             }, 100);
54         }
55 
56         //获取style样式的css属性,考虑兼容;ie,火狐/谷歌;
57         function getStyle(parm1,parm2) {
58             return parm1.currentStyle ? parm1.currentStyle[parm2] : getComputedStyle(parm1)[parm2];  //parm1,要改变的元素代替名;parm2,要改变的属性名
59         }
60     </script>
61 </head>
62 <body>
63     <img id="man" src="running/runner0.jpg" width="107px" height="132px"/>
64     <img id="codingman" src="running/runner0.jpg" width="130px" height="97px"/>
65 </body>
66 </html>

 

posted @ 2017-08-18 17:48  宋发元  阅读(1045)  评论(0)    收藏  举报