今天在视频中学到了一种简单但却非常实用的运动框架，一般的运动都能运用这个框架：
我们可以用一些简单的例子来看到这个框架有哪些作用，首先看一下布局：
<style type="text/css"> div{ width:50px; height:50px; background: red; border:1px solid black; margin:20px; opacity: 0.3;//为了兼容 filter:alpha(opacity:30); } </style>
<body> <input type="text" id="txt1"/> <div></div> <div></div> <div>11111111111</div> <div></div> <div></div> </body>
这是有5个div组成的小方块，我现在想让它们用一个框架就能实现不同的运动；先看看代码，然后我再一步步的解释每一步的作用
/*这是一个获取对象属性的函数，因为兼容性问题，所以需要用一个函数封装起来，比较方便*/
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];//IE浏览器
}
else{
return getComputedStyle(obj,false)[attr];//其他浏览器
}
}
/*创建一个函数，当想让一个物体运动，我们得知道这个物体是哪个，所以有obj——>对象，然后我们得知道它要怎样运动，所以有了attr——>属性；最后我们得知道运动到什么时候为止，也就是iTarget——>目标；*/
function startMove(obj,attr,iTarget){ clearInterval(obj.timer);//首先我们得清除一下定时器，因为当你调用了一个定时器，而没有关闭,随后用很短的时间去再次调用这个定时器，会加快运动速度，就像500个工人做一件事与1个工人做一件事； obj.timer=setInterval(function(){//开启定时器，为什么要obj呢，因为这是给每一个对象设置一个定时器，使他们之间不矛盾，如果没有，会使几个运动物体同时使用一个定时器，这是很恐怖的事情，可以试试有什么后果； var iCur=0;//定义一个变量，这个变量存放的是物体当前所需运动的属性的值 if(attr=='opacity'){//处理透明度问题 iCur=parseInt(parseFloat(getStyle(obj,attr))*100);//顺便注释一下，offsetWidth是一个获取目标的本身width+border*2的值，例如一个div的width=50，border=2，那么offsetWidth=54.如果想让它的宽度缩小：oDiv.style.width=offsetWidth-2;他的宽度反而会增加，因为width=54-2=52>50；
//parseFloat的作用是由于opacity是一个小数，乘以100是因为我们我们需要的是整数运算，后面的iSpeed需要一个比较大的数值；parseInt作用是这个小数乘以100可能会出现问题，比如0.07*100=7.00000000001；这个很多书上都讲到这个小数精度问题，所以我们一般操作都是用整数；视频里面没有parseint鼠标移动快了会出现闪烁问题，而我的没有，应该是版本高了，计算比以前准确了； else{//处理其它运动 iCur=parseInt(getStyle(obj,attr));//获取的值会带px; } var iSpeed=(iTarget-iCur)/8;//设置运动的速度，利用目标值减去当前值，来逐渐减小运动速度； iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);//当速度大于0的时候，例如0.8，可是浏览器解析的是0，但并没有到达目标点，所以向上取整也就是1； if(iCur==iTarget) clearInterval(obj.timer);//当到达目标点时关闭定时器 else {//没有就接着运动 if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; obj.style.opacity=(iCur+iSpeed)/100;//小数值; } else{ obj.style[attr]=iCur+iSpeed+'px'; } } txt1.value=obj.style.opacity;//这个是我测试透明度变化的 },30) }
下面我们就开始调用这个函数：
window.onload=function(){ var aDiv=document.getElementsByTagName('div'); aDiv[0].onmouseover=function(){ startMove(this,'width',300); }//变宽 aDiv[1].onmouseover=function(){ startMove(this,'height',200); }//变高 aDiv[2].onmouseover=function(){ startMove(this,'fontSize',100); }//字体变大 aDiv[3].onmouseover=function(){ startMove(this,'borderWidth',50); }//边框变大 aDiv[4].onmouseover=function(){ startMove(this,'opacity',100); }//透明度变大 aDiv[4].onmouseout=function(){ startMove(this,'opacity',30); }
效果可以试试。这个函数可以封装起来，以后方便使用。
这是我第一次写博客，可能写的比较差，如果有哪些不明白的、或者有问题的欢迎指出，我们相互学习，也为我迈出第一步加油吧~~