关于所有运动框架总结
下面总结一下这几天学习关于运动框架的总结：
【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);//当鼠标放下时，关闭定时器
}