js定时器+简单的动画效果实例

时间：2021-05-26

1.向下滑动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>向下滑动</title> <style> body { margin: 0px; } #show { width: 200px; height: 100px; background-color: lightcoral; margin: 0 auto; } </style></head><body><div id="show"></div><script> var show = document.getElementById('show'); slideDown(show,400); /* 将上述实现的向下滑动效果，封装在一个固定的函数中 * 设计当前实现向下滑动效果函数的形参 * elem - 表示实现向下滑动效果的元素 * maxHeight - 表示元素向下滑动的最大高度值 * 函数的逻辑与默认设置CSS样式属性的值无关 */ function slideDown(elem, maxHeight){ // 操作的元素默认的display值为none elem.style.display = 'block'; elem.style.height = '0px'; var t = setInterval(function(){ var style = window.getComputedStyle(elem,null); var height = parseInt(style.height); // 判断当前的高度是否为 400 if (height >= maxHeight){ clearInterval(t); } else { height++; elem.style.height = height + 'px'; } },50); }</script></body></html>

2.移动效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>移动效果</title> <style> body { margin: 0px; } #box { width: 100px; height: 100px; background-color: lightcoral; position: absolute; left: 100px; top: 100px; } </style></head><body><div id="box"></div><script> var box = document.getElementById('box'); box.onclick = function(){ clearInterval(t); } /* * 向右移动 * 当前元素移动到页面的最右边时 -> 向左移动 * 向左移动 * 当前元素移动到页面的最左边时 -> 向右移动 */ var flag = false;// 默认表示向右 var speed = 1;// 表示每次变化的值 t = setInterval(function(){ //speed += 0.01; // 获取当前页面的宽度 var WIDTH = window.innerWidth; var style = window.getComputedStyle(box,null); var left = parseInt(style.left); var width = parseInt(style.width); // 判断当前元素移动的方向 if (flag){// 向左移动 left -= speed; } else {// 向右移动 left += speed; } // 判断什么情况下，向左移动；判断什么情况下，向右移动 if ((left + width) >= WIDTH){// 向左移动 flag = true; } else if (left <= 0){// 向右移动 flag = false; } box.style.left = left + 'px'; },10);</script></body></html>

3.事件与动画结合

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件与动画结合</title> <style> body { margin: 0px; } </style></head><body><script> // 获取<body>元素 var body = document.body; // 当页面加载完毕后，设置当前<body>元素的高度为当前浏览器窗口的高度 window.onload = function(){ setHeight(body); }; // 当用户改变浏览器窗口的大小时，重新设置<body>元素的高度(等于当前窗口的高度) window.onresize = function(){ setHeight(body); }; // 定义函数 - 设置<body>元素的高度等于当前窗口的高度 function setHeight(elem){ elem.style.height = window.innerHeight + 'px'; } var width = 100,height = 100; // 为<body>元素绑定click事件 body.onclick = function(event){ var x = event.clientX; var y = event.clientY; // 创建<div>元素，显示的位置在鼠标当前的坐标值 var div = document.createElement('div'); div.setAttribute('class','circle'); body.appendChild(div); // rgb(0,0,0)格式 -> 颜色随机 var r = parseInt(Math.random()*255); var g = parseInt(Math.random()*255); var b = parseInt(Math.random()*255); div.style.width = width + 'px'; div.style.height = height + 'px'; div.style.backgroundColor = 'rgb('+r+','+g+','+b+')'; div.style.borderRadius = '50%'; div.style.opacity = 1; div.style.position = 'absolute'; div.style.left = x - width/2 + 'px'; div.style.top = y - height/2 + 'px'; animate(div); } // 定义函数 -> 实现动画效果 function animate(elem){ var style = window.getComputedStyle(elem,null); var opacity = style.opacity; if (opacity <= 0){ clearTimeout(t); // 删除当前元素 } opacity -= 0.01; elem.style.opacity = opacity; // 设定定时器 var t = setTimeout(function(){ animate(elem); },50); }</script></body></html>

以上这篇js定时器+简单的动画效果实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章