目录
0x00 js的运动基础
0x01 单物体运动框架
0x02 多物体运动框架
0x03 改变单一任意值运动框架
0x04 链式运动框架
0x05 改变多值运动框架
0x06 完美运动框架
0x00 js的运动基础
先让div动起来，动起来之后设置一个条件让他停止运动，要不然他会一直运动下去
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin:0;padding:0;}#div1{position: absolute;left:0;top:50px;width:200px;height:200px;background: blue;}</style></head><body><button onclick="moving()">开始运动</button><div id='div1'></div><script type="text/javascript">var oDiv=document.getElementById('div1')var timer =nullfunction moving(){timer = setInterval(function(){if(oDiv.offsetLeft>300){clearInterval(timer);}else{oDiv.style.left = oDiv.offsetLeft +1+'px';}},30);}</script></body></html>
0x01 单物体运动框架
封装好一个方法，让外部传入目的地的值，即让物体停下来的值
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin:0;padding:0;}#div1{position: absolute;left:0;top:50px;width:200px;height:200px;background: blue;}</style></head><body><button onclick="moving(500)">开始运动</button><div id='div1'></div><script type="text/javascript">var oDiv=document.getElementById('div1')var timer =nullfunction moving(target){var speed = 0;if(oDiv.offsetLeft > target){speed = -7}else{speed = 7}timer = setInterval(function(){if(Math.abs(oDiv.offsetLeft-target)<=7){oDiv.style.left = target+'px';clearInterval(timer);}else{oDiv.style.left = oDiv.offsetLeft +speed+'px';}},30);}</script></body></html>
0x02 多物体运动框架
封装一个方法让多个物体共用
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#div1,div{float:left;height:100px;width:100px;background:black;margin-left:20px;}</style></head><body><div id='div1'></div><div></div><div></div><script type="text/javascript">var oDiv = document.getElementsByTagName('div');for(var i=0;i<oDiv.length;i++){oDiv[i].timer =null;oDiv[i].onmouseover = function(){moving(this,400);};oDiv[i].onmouseout = function(){moving(this,100);};}function moving(obj,target){clearInterval(obj.timer);var speed =(target-obj.offsetHeight)/8;speed = speed>0?Math.ceil(speed):Math.floor(speed);obj.timer = setInterval(function(){if(Math.abs(obj.offsetHeight-target)<=Math.abs(speed)){obj.style.height=target+'px';clearInterval(obj.timer);}else{obj.style.height = obj.offsetHeight + speed+'px';}},30)}</script></body></html>
0x03 改变单一任意值运动框架
在多物体运动框架的基础上增加一些修改样式的参数
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#div1,div{float:left;height:100px;width:100px;background:black;margin-left:20px;font-size: 10px;color:green;}</style></head><body><div id='div1'>西北老汉</div><div>空条承太郎</div><div>乔瑟夫乔斯达</div><script type="text/javascript">var oDiv = document.getElementsByTagName('div');oDiv[0].timer =null;oDiv[0].onmouseover = function(){moving(this,'fontSize',50);};oDiv[0].onmouseout = function(){moving(this,'fontSize',12);};oDiv[1].timer =null;oDiv[1].onmouseover = function(){moving(this,'width',400);};oDiv[1].onmouseout = function(){moving(this,'width',100);};oDiv[2].timer =null;oDiv[2].onmouseover = function(){moving(this,'height',400);};oDiv[2].onmouseout = function(){moving(this,'height',100);};// 返回对象obj的attr属性function getStyleValue(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];}}function moving(obj,attr,target){clearInterval(obj.timer);// 获取要修改属性的值var currvalue=parseInt(getStyleValue(obj,attr));var speed =(target-currvalue)/8;speed = speed>0?Math.ceil(speed):Math.floor(speed);obj.timer = setInterval(function(){currvalue=parseInt(getStyleValue(obj,attr));if(Math.abs(currvalue-target)<=Math.abs(speed)){obj.style[attr]= target+'px';clearInterval(obj.timer);}else{obj.style[attr] = currvalue + speed+'px';}},30)}</script></body></html>
0x04 链式运动框架
在改变单一任意值运动框架的基础上添加一个回调函数参数
链式运动顾名思义就是先运动完一个值再运动另一个。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#div1,div{float:left;height:100px;width:100px;background:black;margin-left:20px;font-size: 10px;color:green;}</style></head><body><div id='div1'>点击我展开</div><div id='div2'>空条承太郎</div><div id='div3'>点击我收起</div><script type="text/javascript">var oDiv1 = document.getElementById('div1');var oDiv2 = document.getElementById('div2');var oDiv3 = document.getElementById('div3');oDiv1.timer=oDiv2.timer =oDiv3.timer=null;oDiv1.onclick = function(){moving(oDiv2,'width',400,function(){moving(oDiv2,'height',400);});};oDiv3.onclick = function(){moving(oDiv2,'height',100,function(){moving(oDiv2,'width',100);});}// 返回对象obj的attr属性function getStyleValue(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];}}function moving(obj,attr,target,callbackfun){clearInterval(obj.timer);// 获取要修改属性的值var currvalue=parseInt(getStyleValue(obj,attr));var speed =(target-currvalue)/8;speed = speed>0?Math.ceil(speed):Math.floor(speed);obj.timer = setInterval(function(){currvalue=parseInt(getStyleValue(obj,attr));if(Math.abs(currvalue-target)<=Math.abs(speed)){obj.style[attr]= target+'px';clearInterval(obj.timer);if(callbackfun){callbackfun();}}else{obj.style[attr] = currvalue + speed+'px';}},30)}</script></body></html>
0x05 改变多值运动框架
同时改变多个我们需要改变的样式值，不像链式操作那样需要等待前一个完成才可以执行下一个
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#div1,div{float:left;height:100px;width:100px;background:black;margin-left:20px;font-size: 10px;color:green;}</style></head><body><div id='div1'>点击我展开</div><div id='div2'>空条承太郎</div><div id='div3'>点击我收起</div><script type="text/javascript">var oDiv1 = document.getElementById('div1');var oDiv2 = document.getElementById('div2');var oDiv3 = document.getElementById('div3');oDiv1.timer=oDiv2.timer =oDiv3.timer=null;oDiv1.onclick = function(){moving(oDiv2,{"width":400,"height":400,"font-size":30});};oDiv3.onclick = function(){moving(oDiv2,{"width":100,"height":100,"font-size":10});}// 返回对象obj的attr属性function getStyleValue(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];}}function moving(obj,json){clearInterval(obj.timer);obj.timer = setInterval(function(){// 判断所有运动是否已完成var isClear= true;for(var attr in json){var currvalue=parseInt(getStyleValue(obj,attr));var speed =(json[attr]-currvalue)/8;speed = speed>0?Math.ceil(speed):Math.floor(speed);if(currvalue!=json[attr]){isClear=false;obj.style[attr] = currvalue + speed+'px';}}if(isClear == true){clearInterval(obj.timer);}},30)}</script></body></html>
0x06 完美运动框架
在多值运动框架的基础上考虑运动完之后传入回调函数
注意改变透明度opacity需要做特殊处理
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div{float:left;height:100px;width:100px;background:black;margin-left:20px;font-size: 10px;color:green;}#div2{/*兼容ie的写法*/filter: alpha(opacity:30);/*兼容非ie的写法*/opacity:0.3; /*写0到1之间的数，修改透明度*/}</style></head><body><div id='div1'>点击我展开</div><div id='div2'>空条承太郎</div><div id='div3'>点击我收起</div><script type="text/javascript">var oDiv1 = document.getElementById('div1');var oDiv2 = document.getElementById('div2');var oDiv3 = document.getElementById('div3');oDiv1.timer=oDiv2.timer =oDiv3.timer=null;oDiv1.onclick = function(){moving(oDiv2,{"width":400,"height":400,"font-size":30,'opacity':100},function(){alert("我已经执行完了");});};oDiv3.onclick = function(){moving(oDiv2,{"width":100,"height":100,"font-size":10,'opacity':30});}// 返回对象obj的attr属性function getStyleValue(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];}}function moving(obj,json,callbackfun){clearInterval(obj.timer);obj.timer = setInterval(function(){// 判断所有运动是否已完成var isClear= true;for(var attr in json){var currvalue=0;if(attr=='opacity'){currvalue=Math.round(getStyleValue(obj,attr)*100);// Math.round()四舍五入}else{currvalue=parseInt(getStyleValue(obj,attr));}var speed =(json[attr]-currvalue)/8;speed = speed>0?Math.ceil(speed):Math.floor(speed);if(currvalue!=json[attr]){isClear=false;if(attr=='opacity'){obj.style.filter="opacity(alpha:"+currvalue+speed+')';obj.style.opacity=(currvalue+speed)/100;}else{obj.style[attr] = currvalue + speed+'px';}}}if(isClear == true){clearInterval(obj.timer);if(callbackfun){callbackfun();}}},30)}</script></body></html>
JavaScriptDay08:js运动基础 单物体运动框架 多物体运动框架 改变单一任意值运动框架 改变多值运动框架 完美运动框架
