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 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 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>