首页 > 代码库 > javascript动画效果之匀速运动

javascript动画效果之匀速运动

2024-08-18 11:30:25   217人阅读

html和css写在一起方便看,div通过定位设置为-200隐藏,span也是通过定位定在div靠左的中间

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7     <style type="text/css">
 8         * {
 9             margin: 0;
10             padding: 0;
11             font-size: 12px;
12         }
13         
14         div {
15             width: 200px;
16             height: 200px;
17             background: green;
18             position: relative;
19             left: -200px;
20         }
21         
22         span {
23             width: 30px;
24             height: 30px;
25             line-height: 30px;
26             background: red;
27             position: absolute;
28             left: 200px;
29             top: 85px;
30             text-align: center;
31             cursor: pointer;
32         }
33     </style>
34 </head>
35 
36 <body>
37     <div id="div">
38         <span id="show">show</span>
39     </div>
40 
41 42 </body>
43 
44 </html>

js部分是通过添加定时器设置offsetLeft值的自增和自减，来达到div显示和隐藏的效果

 1 <script>
 2         function $(id) {
 3             return typeof id === "string" ? document.getElementById(id) : id;
 4         }
 5 
 6         window.onload = function() {
 7             //定义了隐藏的div为pto
 8             var pto = $("div");
 9             //定义了按钮span为 btn
10             var btn = $("show");
11             //定义一个空的定时器
12             var timer = null;
13 
14             //按钮绑定一个鼠标移进事件
15             btn.onmouseenter = start;
16 
17             //自定义函数用于自动增加
18             function start() {
19                 //防止自加速,每次开始前都要清除定时器
20                 clearInterval(timer);
21                 //定义一个定时器
22                 timer = setInterval(show, 30);
23             }
24 
25             //自定义函数,直到offsetLeft的值为0,否则offsetLeft的值从-200一直自增5
26             function show() {
27                 if (pto.offsetLeft == 0) {
28                     clearInterval(timer);
29                 } else {
30                     pto.style.left = pto.offsetLeft + 5 + ‘px‘;
31                 }
32             }
33 
34             //绑定一个鼠标移出事件
35             btn.onmouseleave = back;
36 
37             //自定义函数,用于自动减少
38             function back() {
39                 clearInterval(timer);
40                 timer = setInterval(clear, 30);
41             }
42 
43             //自定义函数，直到offsetLeft的值为-200，否则offsetLeft的值一直自减5
44             function clear() {
45                 if (pto.offsetLeft == -200) {
46                     clearInterval(timer);
47                 } else {
48                     pto.style.left = pto.offsetLeft - 5 + ‘px‘;
49                 }
50             }
51 
52         }
53     </script>

 

javascript动画效果之匀速运动


联系
我们