<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
background:orange;
position:absolute;
left:0;
top:0;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.getElementsByTagName('div')[0];
var newLeft,newTop;
var speedX,speedY;
var lastLeft,lastY;
lastLeft=div.offsetLeft;
lastTop=div.offsetTop;
//拖拽功能
div.onmousedown=function(ev){
var eve=window.event||ev;
var disX,disY;
disX=eve.clientX-div.offsetLeft;
disY=eve.clientY-div.offsetTop;
document.onmousemove=function(ev){
//鼠标移动后的坐标
var eve=window.event||ev;
newLeft=eve.clientX-disX;
newTop=eve.clientY-disY;
//速度=物体新坐标-老坐标
speedX=newLeft-lastLeft;
speedY=newTop-lastTop;
lastLeft=newLeft;
lastTop=newTop;
div.style.left=newLeft+"px";
div.style.top=newTop+"px";
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
startMove(div,speedX,speedY);
}
}
function startMove(obj,speedX,speedY){
clearInterval(obj.timer);
var g=2;
obj.timer=setInterval(function(){
speedY+=g;
newLeft=obj.offsetLeft+speedX;
newTop=obj.offsetTop+speedY;
if(newTop>=document.documentElement.clientHeight-obj.offsetHeight){
speedY*=-1;//碰壁后反方向运动
speedX*=0.8;
speedY*=0.8;//模仿重力场 给物体一个摩擦系数 碰壁的时候会有摩擦所以需要降速
//只要碰撞 横向和纵向的速度都会降低 慢慢慢慢就变到不到一的速度，最后停下
newTop=document.documentElement.clientHeight-obj.offsetHeight;
}else if(newTop<0){
newTop=0;
speedY*=-1;
speedY*=0.8;
speedX*=0.8;
}
if(newLeft>=document.documentElement.clientWidth-obj.offsetWidth){
newLeft=document.documentElement.clientWidth-obj.offsetWidth;
speedX*=-1;
speedX*=0.8;
speedY*=0.8;
}else if(newLeft<0){
newLeft=0;
speedX*=-1;
speedX*=0.8;
speedY*=0.8;
}
obj.style.left=newLeft+"px";
obj.style.top=newTop+"px";
if(Math.abs(speedX)<1){
speedX=0;
}
if(Math.abs(speedY)<1){
speedY=0;
}
//让物体停止条件 速度为0 并且运动到底部
if(speedX==0&&speedY==0&&newTop==document.documentElement.clientHeight-obj.offsetHeight){
console.log("over");
clearInterval(obj.timer);
}
console.log(speedX);
console.log(speedY);
},30);
}
</script>
</body>
</html>
644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
