function css(obj, attr, value)//获取或设置css的方法
{
if(arguments.length==2)
{
if(attr!='opacity')
{
return parseInt(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]);
}
else
{
return Math.round(100*parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]));
}
}
else if(arguments.length==3)
switch(attr)
{
case 'width':
case 'height':
case 'paddingLeft':
case 'paddingTop':
case 'paddingRight':
case 'paddingBottom':
value=Math.max(value,0); //误输入是默认执行0
case 'left':
case 'top':
case 'marginLeft':
case 'marginTop':
case 'marginRight':
case 'marginBottom':
obj.style[attr]=value+'px';
break;
case 'opacity':
obj.style.filter="alpha(opacity:"+value+")";
obj.style.opacity=value/100;
break;
default:
obj.style[attr]=value;
}
//return function (attr_in, value_in){css(obj, attr_in, value_in)};
}
var MOVE_TYPE={ //运动方式 1:缓冲 2:弹性
BUFFER: 1,
FLEX: 2
};
function stopMove(obj) //停止当前运动
{
clearInterval(obj.timer);
}
function startMove(obj, oTarget, iType, fnCallBack, fnDuring)
{
var fnMove=null;
if(obj.timer)
{
clearInterval(obj.timer);
}
switch(iType)
{
case MOVE_TYPE.BUFFER:
fnMove=doMoveBuffer;
break;
case MOVE_TYPE.FLEX:
fnMove=doMoveFlex;
break;
}
obj.timer=setInterval(function (){
fnMove(obj, oTarget, fnCallBack, fnDuring);
}, 30);
}
function doMoveBuffer(obj, oTarget, fnCallBack, fnDuring)
{
var bStop=true;
var attr='';
var speed=0;
var cur=0;
for(attr in oTarget)
{
cur=css(obj, attr);
if(oTarget[attr]!=cur)
{
bStop=false;
speed=(oTarget[attr]-cur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
css(obj, attr, cur+speed);
}
}
if(fnDuring)fnDuring.call(obj);
if(bStop)
{
clearInterval(obj.timer);
obj.timer=null;
if(fnCallBack)fnCallBack.call(obj);
}
}
function doMoveFlex(obj, oTarget, fnCallBack, fnDuring)
{
var bStop=true;
var attr='';
var speed=0;
var cur=0;
for(attr in oTarget)
{
if(!obj.oSpeed)obj.oSpeed={};
if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
cur=css(obj, attr);
if(Math.abs(oTarget[attr]-cur)>=1 || Math.abs(obj.oSpeed[attr])>=1)
{
bStop=false;
obj.oSpeed[attr]+=(oTarget[attr]-cur)/5;
obj.oSpeed[attr]*=0.75;
css(obj, attr, cur+obj.oSpeed[attr]);
}
}
if(fnDuring)fnDuring.call(obj);
if(bStop)
{
clearInterval(obj.timer);
obj.timer=null;
if(fnCallBack)fnCallBack.call(obj);
}
}
原生Js完美运动框架(缓冲运动和弹性运动)
最新推荐文章于 2022-04-14 22:17:01 发布