html文件
1
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style type="text/css">
9 .walk_show{
10 width:120px;
11 height:182px;
12 border:1px solid #333;
13 margin:50px auto 0;
14 overflow:hidden;
15 position:relative;
16 }
17 .walk_show img{
18 position:absolute;
19 left:0px;
20 top:0px;
21 }
22 </style>
23 <script type="text/javascript">
24 window.onload = function(){
25 var oImg = document.getElementById('img01');
26 var nowleft = 0;
27
28 function fnMove(){
29
30 nowleft -= 120;
31
32 if(nowleft<-840)
33 {
34 nowleft=0;
35 }
36
37 oImg.style.left = nowleft + 'px';
38 }
39
40 setInterval(fnMove,120);
41
42 }
43
44 </script>
45</head>
46<body>
47 <p>使用下面这张图片制作关键帧动画</p>
48 <img src="images/walking.png" alt="人物走路">
49 <div class="walk_show">
50 <img src="images/walking.png" alt="人物走路" id="img01">
51 </div>
52</body>
53</html>
