1、鼠标可以自由移动盒子。
2、鼠标释放盒子瞬间，根据其释放速度和方向继续运动，碰到边界碰撞后返回运动，碰撞后速度减小，直到最后停止运动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽+碰撞+重力</title>
<style>
#div1{
width: 260px;
height: 160px;
background: url(pz.jpg) center center / cover no-repeat;
position: absolute;
left: 130px;
}
</style>
<script>
var iSpeedX=40;
var iSpeedY=6;
var timer=null;
//上次位置
var larstX=0;
var larstY=0;
window.onload=function(){
var oDiv=document.getElementById("div1");
var oBtn=document.getElementById("btn");
//拖拽
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-larstX;
iSpeedY=t-larstY;
//更新位置
larstX=l;
larstY=t;
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
startMove(oDiv);
}
clearInterval(timer);
}
oBtn.onclick=function(){
startMove(oDiv);
}
}
function startMove(obj){
clearInterval(timer);
timer=setInterval(function(){
iSpeedY+=3;
var l=obj.offsetLeft+iSpeedX;
var t=obj.offsetTop+iSpeedY;
if (l>document.documentElement.clientWidth-obj.offsetWidth) {
iSpeedX*=-0.8;
l=document.documentElement.clientWidth-obj.offsetWidth;
}
else if(l<0){
iSpeedX*=-0.8;
l=0;
}
if (t>document.documentElement.clientHeight-obj.offsetHeight) {
iSpeedY*=-0.8;
iSpeedX*=0.8;
t=document.documentElement.clientHeight-obj.offsetHeight;
}
else if(t<0){
iSpeedY*=-1;
iSpeedX*=0.8;
t=0;
}
//为了防止速度为负时不能停止运动
if (Math.abs(iSpeedY)<1) {
iSpeedY=0;
}
if (Math.abs(iSpeedX)<1) {
iSpeedX=0;
}
//停止条件
if (iSpeedY==0 && iSpeedX==0 && t==document.documentElement.clientHeight-obj.offsetHeight) {
clearInterval(timer);
}
obj.style.left=l+'px';
obj.style.top=t+'px';
},30);
}
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="点击开始运动" id="btn">
</body>
</html>
2101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
