大家好 我是过往云烟 这几天写了一个 JS运动框架,基本上和JQ封装好的动画方法类似 可以改变透明度 高度宽度 字体大小 等等 很多值,原生态JS写的 而且还支持回调函数,可谓是功能应有尽有啊
下面是框架的源码
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)
}
调用的话 就直接把这2个函数放到一个JS文件里面 第一个函数是获取样式的 第二个函数是运动框架本身 获取样式 是JSON格式 比如要改变一个DIV的宽度 可以这样写
startMove('div',{width:100});
如果改变多个值可以这样
startMove('div',{width:100,height:200});
同时还支持链式运动
startMove(div,{width:100,height:100},function(){
startMove(div,{opacity:20});
});
这样就可以 先改变高度宽度 然后在改变透明度