多物体缓冲运动
<!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.offsetWidth + 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为jsonfunction 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>
