javascript 动画效果(多物体缓冲运动,多物体透明度变化,匀速移入移出、链式运动、同时运动)
2019-08-08 21:05
1521 查看
多物体缓冲运动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>多物体缓冲运动</title> <style> ul, li { list-style: none; } ul li { width: 200px; height: 100px; background: red; margin-bottom: 20px; } </style> <script> window.onload = function() { var aLi = document.getElementsByTagName("li"); for (var i = 0; i < aLi.length; i++) { // 存在连续选择li元素不恢复的bug,所以需要给每个li清除定时器 aLi[i].timer = null; aLi[i].onmouseover = function() { startMove(this, 400); } aLi[i].onmouseout = function() { startMove(this, 200); } } // 代表执行一个动画, 第一个参数代表所要执行的对象, 第二个参数代表所要执行对象的宽度 function startMove(obj, iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function() { // 想要改变li 元素的宽度,但不知道是哪一个,可以传一个参数obj来指定当前选中的 这个li元素 var speed = (iTarget - obj.offsetWidth) / 8; // 涉及到运动的速度计算需要进行向上向下的取判断 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (obj.offsetWidth == iTarget) { clearInterval(obj.timer); } else { obj.style.width = obj.of 3ff7 fsetWidth + speed + "px"; } }, 30) } } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
多物体透明度修改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>JS动画之多物体透明度修改</title> <style> *{padding: 0;margin: 0;} div{ width: 200px; height: 100px; background: red; float: left; margin: 10px; opacity: 0.3; } </style> <script> window.onload=function(){ var oDiv=document.getElementsByTagName("div"); for(var i=0; i<oDiv.length; i++){ // 给每个div元素各自清除定时器仍存在bug,是因为之前设置了统一的透明度值,多物体运动中只能分别设置 oDiv[i].alpha=30; oDiv[i].onmouseover=function(){ startMove(this,100); }; oDiv[i].onmouseout=function(){ startMove(this,30); } } } // var alpha=30; function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=0; if(obj.alpha>iTarget){ speed=-5; }else{ speed=5; } if(obj.alpha == iTarget){ clearInterval(obj.timer); }else{ obj.alpha += speed; obj.style.opacity=obj.alpha/100; } },30); } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </body> </html>
移入移出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>JS动画-移入移出</title> <style type="text/css"> div { width: 250px; height: 30px; background-color: red; position: absolute; left: -200px; top: 50px; } span { float: right; color: #fff; color: blue } </style> <script> window.onload = function() { var oDiv = document.getElementById("div"); oDiv.onmouseover = function() { startMove(0); }; oDiv.onmouseout = function() { startMove(-200); } } var timer = null; //不加会出错,清空样式 function startMove(iTarget) { clearInterval(timer); var oDiv = document.getElementById("div"); timer = setInterval(function() { var speed = 0; if (oDiv.offsetLeft > iTarget) { speed = -5; } else { speed = 5; } if (oDiv.offsetLeft == iTarget) { clearInterval(timer); } else { oDiv.style.left = oDiv.offsetLeft + speed + "px"; } }, 30); } </script> </head> <body> <div id="div"> <span>share</span> </div> </body> </html>
链式运动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>链式运动</title> <style> div { width: 200px; height: 100px; border: 1px solid black; background: red; filter: alpha(opacity=30); opacity: 0.3; } </style> <script src="move.js"></script> <script> window.onload = function() { var oDiv = document.getElementById("div"); oDiv.onmouseover = function() { startMove(oDiv, "width", 400, function() { startMove(oDiv, "height", 200, function() { startMove(oDiv, "opacity", 100); }) }) }; oDiv.onmouseout = function() { startMove(oDiv, "opacity", 30, function() { startMove(oDiv, "height", 100, function() { startMove(oDiv, "width", 200); }) }) } } /* 获得样式 */ function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, null)[attr]; } } function startMove(obj, attr, iTarget, fun) { clearInterval(obj.timer); obj.timer = setInterval(function() { // 取当前值 var icur = 0; if (attr == "opacity") { icur = parseFloat(getStyle(obj, attr)) * 100; } else { icur = parseInt(getStyle(obj, attr)); } // 计算速度 var speed = (iTarget - icur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 检测停止 if (icur == iTarget) { clearInterval(obj.timer); if (fun) { //当存在第四个参数fun时,调用这个fun函数 fun(); } } else { if (attr == "opacity") { obj.style.filter = "alpha(opacity=)" + (icur + speed) + ")"; obj.style.opacity = (icur + speed) / 100; } else { obj.style[attr] = icur + speed + "px"; } } }, 30) } </script> </head> <body> <div id="div"></div> </body> </html>
同时运动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>链式运动</title> <style> div { width: 200px; height: 100px; border: 1px solid black; background: red; filter: alpha(opacity=30); opacity: 0.3; } </style> <script src="move.js"></script> <script> window.onload = function() { var oDiv = document.getElementById("div"); oDiv.onmouseover = function() { startMove(oDiv, { width: 205, height: 200, opacity: 100 }); } oDiv.onmouseout = function() { startMove(oDiv, { width: 200, height: 100, opacity: 30 }); } } function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } // 修改attr,iTarget为json function startMove(obj, json, fun) { var flage = true; clearInterval(obj.timer); obj.timer = setInterval(function() { // 循环json中每个对值进行运动 for (var attr in json) { // 取当前值 var icur = 0; if (attr == "opacity") { icur = parseFloat(getStyle(obj, attr)) * 100; } else { icur = parseInt(getStyle(obj, attr)); } // 计算速度 var speed = (json[attr] - icur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 检测停止 if (icur != json[attr]) { flage = false; } if (attr == "opacity") { obj.style.filter = "alpha(opacity=)" + (icur + speed) + ")"; obj.style.opacity = (icur + speed) / 100; } else { obj.style[attr] = icur + speed + "px"; } if (flage) { clearInterval(obj.timer); if (fun) { fun(); } } } }, 30) } </script> </head> <body> <div id="div"></div> </body> </html>
相关文章推荐
- javascript动画效果之多物体缓冲运动
- 原生javascript实现匀速运动动画效果
- javascript动画效果之多物体透明度
- javascript动画效果之匀速运动(修订版)
- js动画之匀速运动、缓冲运动、弹性运动、碰撞运动、属性变化动画
- JS动画效果(移动、透明度、缓冲、多物体)
- 鼠标移入移出透明度变化效果
- 原生javascript实现匀速运动动画效果
- javascript动画效果之匀速运动
- JavaScript动画效果 opacity 透明度变化
- javascript动画效果之透明度(修改版)
- javascript动画框架实现宽高透明度变化
- JS多物体 任意值 链式 缓冲运动
- JS实现物体带缓冲的间歇运动效果示例
- 42、JavaScript的运动----多个物体同时运动
- JavaScript进阶--拉勾网鼠标移入移出效果
- javascript动画特效 多物体运动 源代码
- 原生js如何做一个链式运动,JavaScript怎么做鼠标跟随效果
- JS多物体实现缓冲运动效果示例
- javascript动画效果之透明度