关于所有运动框架总结

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

【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; 上下  左右   外边距
【11】弹性运动  实质是改变 方向和速度

function startMove()
{
    clearInterval(timer);
    timer=setInterval(function(){
        var oDiv=document.getElementById('div1');
        speedY+=3;
        var l=oDiv.offsetLeft+speedX;
        var t=oDiv.offsetTop+speedY;//注意这是高度啊！
        if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
        {
              speedY*=-0.8;
              speedX*=0.8;//这里代表摩擦力
             t=document.documentElement.clientHeight-oDiv.offsetHeight;
        }
        else if(t<=0)
        {
             speedY*=-1;
             t=0;
        }
       if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
        {
            speedX*=-0.8;
            l=document.documentElement.clientWidth-oDiv.offsetWidth
        }
        else if(l<=0)
        {
             speedX*=0.8;
             l=0;
        }
        if(Math.abs(speedX)<1){speedX=0;}//解决小数问题
        if(Math.abs(speedY)<1){speedY=0;}
        oDiv.style.left=l+'px';
        oDiv.style.top=t+'px';
        //碰撞停止的条件 当速度都为0，且高度为div本身的高度时
        if(speedX==0&&speedY==0&&t==document.documentElement.clientHeight-oDiv.offsetHeight)
        {
            clearInterval(timer);
        }
    },30);
}

 

【12】拖拽运动框架  包括onmousedown,onmousemove,onmouseup事件,了解各个之间的步骤逻辑
 

 oDiv.onmousedown=function(ev)
      {
          var oEvent=ev||event;
          var disX=oEvent.clientX-oDiv.offsetLeft;
          var disY=oEvent.clientY-oDiv.offsetTop;
          document.onmousemove=function(ev)
          {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;//储存鼠标按下出与div之间的差值
            var t=oEvent.clientY-disY;
            oDiv.style.left=l+'px';
            oDiv.style.top=t+'px';
          /*  var div=document.createElement('div');
            div.style.left=l+'px';
            div.style.top=t+'px';
            document.body.appendChild(div);//将其加入body里面*/
            speedX=l-lastX;
            speedY=t-lastY;
            lastX=l;//更新前后数值
            lastY=t;
            document.title= 'x='+speedX+'|y='+speedY;
           
          }
          oDiv.onmouseup=function()
          {
              oDiv.onmousemove=null;
              oDiv.onmouseup=null;
              startMove();
          }
            clearInterval(timer);//当鼠标放下时，关闭定时器
      }