源代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{width:100px;height:100px;background: red;position:absolute;}
div{width:2px;height:2px;background: black;position:absolute;}
</style>
<script>
window.οnlοad=function(){
var oDiv=document.getElementById('div1');
var lastX=0;
var lastY=0;
oDiv.οnmοusedοwn=function(ev){
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
document.οnmοusemοve=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='x='+iSpeedX+',y='+iSpeedY;
/*var oBox=document.createElement('div');
oBox.style.left=l+'px';
oBox.style.top=t+'px';
document.body.appendChild(oBox);*/
};
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
startMove();
};
clearInterval(timer);
};
};
var timer=null;
var iSpeedX=0;
var iSpeedY=0;
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(t>=document.documentElement.clientHeight-oDiv.offsetHeight){
iSpeedY*=-0.8;
iSpeedX*=0.8;
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}else if(t<=0){
iSpeedY*=-1;
iSpeedX*=0.8;
t=0;
}
if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){
iSpeedX*=-0.8;
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}else if(l<=0){
iSpeedX*=-0.8;
l=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){
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
},30);
}
</script>
</head>
<body>
<input id="ipt1" type="button" value="开始运动" οnclick="startMove()">
<div id="div1"></div>
</body>
</html>
1、弹性运动:
1.1、加减速运动:速度不断增加或减少;速度减小到负值,会向反方向运动。
1.2、弹性运动:在目标点左边加速,在目标点右边减速;根据距离计算加速度。(情景想象成弹性橡皮筋小球)
1.3、摩擦力:速度不断减小(策略是乘上小数)
1.4、带摩擦力的弹性运动:弹性运动+摩擦力
1.5、弹性公式:速度+=(目标值-oDiv.offsetLeft)/5 速度*=0.7
1.6、无法到达指定位置(小数误差问题)如何解决?速度无法取整,使用变态方法----变量
1.7、弹性运动的问题:运动过界
2、碰撞运动
2.1、撞到目标点,速度反转;无重力的漂浮Div:速度反转、滚动条闪烁的问题(过界后直接拉回来)
2.2、加入重力:反转速度(*-1)的同时,减小速度(*小数);纵向碰撞,横向速度也减小(因为受力不是垂直的)
横向速度小数问题(负数)
2.3、鼠标拖拽:两点间距离求出速度。
3、运动终止条件:距离够近,速度够小。