Javascript完美运动通用封装框架
作者：秋了秋 发表时间：2015年11月01日
运动是一个很有趣的事情，特别是网页上的运动，几乎无处不在，因为它能给人良好的用户体验性，况且有的网页不止一个运动，是由众多的运动元素组成，那是不是每一个元素的运动都给它一顿敲代码实现，显然是不现实，所以我们封装一个通用框架，让网页中运动的每一个元素的运动都调用这个框架，只变化参数，这样就方便很多。这篇文章的运动框架可以给每一个程序员省了许多的代码工作量，非常值得收藏和学习。
它的价值不止在减少工作量，更多的在兼容性，即使目前有很多运动都可以通过css3来实现，但那毕竟不兼容ie这个东西。除了兼容性之外，优点还有它是变速运动，让运动变化看起来更圆滑。以及支持多个运动同时进行，以及运动变化的链式反应。
以下是Javascript运动通用封装框架代码：
function getStyle(obj, attr)
{
if(obj.currentStyle)
{return obj.currentStyle[attr];}
else
{return getComputedStyle(obj, false)[attr];}
}
function startMove(obj, json, fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true;
for(var attr in json)
{
//1.取当前的值
var iCur=0;
if(attr=='opacity'){iCur=parseInt(parseFloat(getStyle(obj, attr))*100);}
else{iCur=parseInt(getStyle(obj, attr));}
//2.算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测停止
if(iCur!=json[attr])
{bStop=false;}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else{obj.style[attr]=iCur+iSpeed+'px';}
}
if(bStop){clearInterval(obj.timer);if(fn){fn();}}
}, 30)
}
使用方法：先把以上这段js插入到页面js中，然后调用，调用方法举例：
var input=document.getElementById('input'); input.onmouseover=function(){
startMove(this, 'height', 300)//普通运动 startMove(this, 'height', 300,function(){alert('a')})//运动结束回调方法 startMove(this,{width:200,opacity:100}, 300)//多个运动同时进行 }
只需要变换红色的参数即可，分别对应为：运动对象，需要变化的属性，变化到目标值，变化完成调用的函数。
其中需要变化的属性包括left，height，width，opacity等，其中opacity的目标值应乘以100。
0
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/405.html