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>