js基础之弹性运动（四）

一、滑动菜单、图片

var iSpeed=0;
var left=0;
function startMove(obj,iTarg){
　　clearInterval(obj.timer);//记得先关定时器
　　obj.timer=setInterval(function(){
　　　　iSpeed+=(iTarg-obj.offsetLeft)/5;
　　　　iSpeed*=0.7;
　　　　left+=iSpeed;//用一个变量left解决小数误差的问题

　　　　if(Math.abs(iSpeed)<1 && Math.abs(iTarg-obj.offsetLeft)<1){
　　　　　　obj.style.left=iTarg+'px';
　　　　}else{
　　　　　　obj.style.left=left+'px';//console.log(obj.offsetLeft+'/'+iTarg+'/'+iSpeed);
　　　　}
　　},30);
}

二、运动过界

function startMove(obj,iTarget){
　　clearInterval(obj.timer);
　　obj.timer=setInterval(function(){
　　　　iSpeed+=(iTarget-height)/5;
　　　　iSpeed*=0.7;

　　　　if(Math.abs(iSpeed<1) && Math.abs(iTarget-height)<1){
　　　　　　clearInterval(obj.timer);
　　　　}else{
　　　　　　height+=iSpeed;
　　　　if(height<0){
　　　　　　height=0;//如果不做处理，打印出的高度会为负值，这种情况就是运动过界，在IE下会报错
　　　　}
　　　　document.getElementById('txt1').value+=height+'\n';
　　　　obj.style.height=height+'px';
　　　　}
　　},30);
}

三、碰撞+拖拽+重力

var iSpeedX=0;
var iSpeedY=0;
var timer=null;

function startMove(){
　　clearInterval(timer);
　　timer=setInterval(function(){
　　　　var oDiv=document.getElementById('div1');
　　　　iSpeedY+=3;//重力
　　　　var l=oDiv.offsetLeft+iSpeedX;
　　　　var t=oDiv.offsetTop+iSpeedY;

　　　　if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){
　　　　　　iSpeedX*=-0.8;//反弹+摩擦力
　　　　　　l=document.documentElement.clientWidth-oDiv.offsetWidth;
　　　　}else if(l<=0){
　　　　　　iSpeedX*=-0.8;//alert(iSpeedX+'--'+iSpeedY);
　　　　　　l=0;
　　　　}
　　　　if(t>=document.documentElement.clientHeight-oDiv.offsetHeight){
　　　　　　iSpeedY*=-0.8;
　　　　　　iSpeedX*=0.8;//alert(iSpeedX+'--'+iSpeedY);
　　　　　　t=document.documentElement.clientHeight-oDiv.offsetHeight;
　　　　}else if(t<=0){
　　　　　　iSpeedY*=-1;
　　　　　　iSpeedX*=0.8;
　　　　　　t=0;
　　　　}
　　　　if(Math.abs(iSpeedX)<1){
　　　　　　iSpeedX=0;
　　　　}
　　　　if(Math.abs(iSpeedY)<1){
　　　　　　iSpeedY=0;
　　　　}
　　　　if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight){
　　　　　　clearInterval(timer);alert(0);
　　　　}else{
　　　　　　oDiv.style.left=l+'px';
　　　　　　oDiv.style.top=t+'px';//document.title=iSpeedX+'--'+iSpeedY;
　　　　}

　　},30);
}

window.onload=function(){
var oDiv = document.getElementById('div1');
//拖拽
var lastX=0;
var lastY=0;

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;
　　　　var t=oEvent.clientY-disY;

　　　　oDiv.style.left=l+'px';
　　　　oDiv.style.top=t+'px';

　　　　iSpeedX=l-lastX;
　　　　iSpeedY=t-lastY;

　　　　lastX=l;
　　　　lastY=t;//document.title=iSpeedX+'/'+iSpeedY;

　　　　//div左上角轨迹，类似画笔
　　　　/*var oBox=document.createElement('div');
　　　　oBox.style.left=l+'px';
　　　　oBox.style.top=t+'px';
　　　　document.body.appendChild(oBox);//console.log(l+'--'+t);*/
　　};
　　document.onmouseup=function(){
　　　　document.onmousemove=null;
　　　　document.onmouseup=null;

　　　　startMove();
　　};
clearInterval(timer);
 };

}