下面总结一下这几天学习关于运动框架的总结：
【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; 上下 左右 外边距