定时器 + 简单的动画效果

2018-06-24 00:45:01来源：未知阅读 ()

1.向下滑动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>向下滑动</title>
 6     <style>
 7         body {
 8             margin: 0px;
 9         }
10         #show {
11             width: 200px;
12             /* 高度为 0 */
13             height: 100px;
14             background-color: lightcoral;
15             margin: 0 auto;
16             /* 设置为隐藏 */
17             /*display: none;*/
18         }
19 
20     </style>
21 </head>
22 <body>
23 <div id="show"></div>
24 <script>
25     var show = document.getElementById('show');
26     /*show.style.display = 'block';
27 
28     var t = setInterval(function(){
29         var style = window.getComputedStyle(show,null);
30         var height = parseInt(style.height);
31         // 判断当前的高度是否为 400
32         if (height >= 400){
33             clearInterval(t);
34         } else {
35             height++;
36             show.style.height = height + 'px';
37         }
38     },50);*/
39 
40     slideDown(show,400);
41 
42     /*
43         将上述实现的向下滑动效果，封装在一个固定的函数中
44         * 设计当前实现向下滑动效果函数的形参
45           * elem - 表示实现向下滑动效果的元素
46           * maxHeight - 表示元素向下滑动的最大高度值
47         * 函数的逻辑与默认设置CSS样式属性的值无关
48       */
49     function slideDown(elem, maxHeight){
50         // 操作的元素默认的display值为none
51         elem.style.display = 'block';
52         elem.style.height = '0px';
53 
54         var t = setInterval(function(){
55             var style = window.getComputedStyle(elem,null);
56             var height = parseInt(style.height);
57             // 判断当前的高度是否为 400
58             if (height >= maxHeight){
59                 clearInterval(t);
60             } else {
61                 height++;
62                 elem.style.height = height + 'px';
63             }
64         },50);
65     }
66 
67 
68 </script>
69 </body>
70 </html>

2.移动效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>移动效果</title>
 6     <style>
 7         body {
 8             margin: 0px;
 9         }
10         #box {
11             width: 100px;
12             height: 100px;
13             background-color: lightcoral;
14 
15             position: absolute;
16             left: 100px;
17             top: 100px;
18         }
19     </style>
20 </head>
21 <body>
22 <div id="box"></div>
23 <script>
24     var box = document.getElementById('box');
25     box.onclick = function(){
26         clearInterval(t);
27     }
28     /*
29         * 向右移动
30          * 当前元素移动到页面的最右边时 -> 向左移动
31         * 向左移动
32          * 当前元素移动到页面的最左边时 -> 向右移动
33      */
34     var flag = false;// 默认表示向右
35     var speed = 1;// 表示每次变化的值
36     t = setInterval(function(){
37         //speed += 0.01;
38         // 获取当前页面的宽度
39         var WIDTH = window.innerWidth;
40         var style = window.getComputedStyle(box,null);
41         var left = parseInt(style.left);
42         var width = parseInt(style.width);
43         // 判断当前元素移动的方向
44         if (flag){// 向左移动
45             left -= speed;
46         } else {// 向右移动
47             left += speed;
48         }
49         // 判断什么情况下，向左移动；判断什么情况下，向右移动
50         if ((left + width) >= WIDTH){// 向左移动
51             flag = true;
52         } else if (left <= 0){// 向右移动
53             flag = false;
54         }
55         box.style.left = left + 'px';
56     },10);
57 
58 </script>
59 </body>
60 </html>

3.事件与动画结合

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件与动画结合</title>
 6     <style>
 7         body {
 8             margin: 0px;
 9         }
10     </style>
11 </head>
12 <body>
13 <script>
14     // 获取<body>元素
15     var body = document.body;
16     // 当页面加载完毕后，设置当前<body>元素的高度为当前浏览器窗口的高度
17     window.onload = function(){
18         setHeight(body);
19     };
20     // 当用户改变浏览器窗口的大小时，重新设置<body>元素的高度(等于当前窗口的高度)
21     window.onresize = function(){
22         setHeight(body);
23     };
24     // 定义函数 - 设置<body>元素的高度等于当前窗口的高度
25     function setHeight(elem){
26         elem.style.height = window.innerHeight + 'px';
27     }
28 
29     var width = 100,height = 100;
30     // 为<body>元素绑定click事件
31     body.onclick = function(event){
32         var x = event.clientX;
33         var y = event.clientY;
34         // 创建<div>元素，显示的位置在鼠标当前的坐标值
35         var div = document.createElement('div');
36         div.setAttribute('class','circle');
37         body.appendChild(div);
38         // rgb(0,0,0)格式 -> 颜色随机
39         var r = parseInt(Math.random()*255);
40         var g = parseInt(Math.random()*255);
41         var b = parseInt(Math.random()*255);
42 
43         div.style.width = width + 'px';
44         div.style.height = height + 'px';
45         div.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
46         div.style.borderRadius = '50%';
47         div.style.opacity = 1;
48         div.style.position = 'absolute';
49         div.style.left = x - width/2 + 'px';
50         div.style.top = y - height/2 + 'px';
51 
52         animate(div);
53     }
54     // 定义函数 -> 实现动画效果
55     function animate(elem){
56         var style = window.getComputedStyle(elem,null);
57         /*var width = parseInt(style.width);
58         var height = parseInt(style.height);
59         var left = parseInt(style.left);
60         var top = parseInt(style.top);
61         width++;
62         height++;
63         elem.style.width = width + 'px';
64         elem.style.height = height + 'px';
65         elem.style.left = (left - 0.5) + 'px';
66         elem.style.top = (top - 0.5) +'px';*/
67 
68         var opacity = style.opacity;
69 
70         if (opacity <= 0){
71             clearTimeout(t);
72             // 删除当前元素
73         }
74 
75         opacity -= 0.01;
76         elem.style.opacity = opacity;
77 
78         // 设定定时器
79         var t = setTimeout(function(){
80             animate(elem);
81         },50);
82     }
83 
84 </script>
85 </body>
86 </html>