关于所有运动框架总结

Posted 2020-06-18 婷风

下面总结一下这几天学习关于运动框架的总结：

【1】匀速运动框架

startMove(itarget)

【2】缓冲运动框架

startMove(obj, iTarget)

【3】任意值运动框架

startMove(obj, attr, iTarget)

【4】链式运动框架

startMove(obj, attr, iTarget, fn)

function  getStyle(obj,attr)//用此种方法获取样式中的属性
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr,target,fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function ()
{
var iCur=0;
if(attr==‘opacity‘)
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);//这里加parseInt是避免div的数值不稳定，在波动
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
var iSpeed=(target-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur==target)
{
clearInterval(obj.timer);
  if(fn){fn();}
}
else
{
if(attr==‘opacity‘)
{
obj.style.filter=‘alpha(opacity:‘+(iCur+iSpeed)+‘)‘;
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+‘px‘;
}
}

}, 30)

}

【5】多值运动框架

startMove(obj, json)

 

【6】完美运动框架

startMove(obj, json, fn)

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 stop=true;//这里会出现一个问题：当宽度很小时，链式运动高度在变化时，会卡住，此为标志
for(var attr in json)
{
var iCur=0;
if(attr==‘opacity‘)
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);//这里加parseInt是避免div的数值不稳定，在波动
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur!=json[attr])  //检测该循环中，是否所有的属性均已检测完，没有的话就返回 false
{
stop=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(stop)//如果检测到已经  循环了所有的属性，则最终返回的为true
{
clearInterval(obj.timer);
if(fn){fn();}
}
}, 30)

}

【6】给所有Li加背景图片，循环遍历

for(i=0;i<li.length;i++)

{

li[i].style.backgroundImage=‘url(‘(i+1)+‘.jpg) ‘  ;//此为URL，且返回的为字符串，需加上单引号。

}

【7】检测是否存在节点

if(aLi.length)//如果li存在，插入到第一个之前，否则插入  通过是否有长度来判断
{
oUl.insertBefore(oLi,aLi[0]);
}

【8】对于自适应高度

一般总会 var iheight=oLi.offsetHeight;//将变量值的高度先储存起来
oLi.style.height=0;//先高度上展开，然后显示透明度

下面调用运动框架即可！在同时改变多个属性，比如同时改变宽，高，透明度等，需要调用完美框架！采用JSON的方式，在一个循环中得到多个属性值。

【9】鼠标移入，图片从中心扩大和缩小

startMove(this,{width:200,height:200,marginLeft:-50,marginTop:-50});一般是改变marginLeft和marginTop,且其值由两个div的宽度相减，然后除以2。

【10】关于margin的用法

4个值：

 margin:10px 5px 15px 20px; 上  右  下 左

3个值：

margin:10px 5px 15px;   上  左右  下

2个值：

margin:10px 5px; 上下  左右   外边距