<html>
<head>
<meta charset="utf-8">
<title>看看运动轨迹 松手自动回到原点2</title>
<style type="text/css">
.div1{
height:100px;
width:100px;
background:#f00;
position: absolute;
border-radius: 50%;
}
.d{
width:2px;
height:2px;
background:#000;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByTagName("div")[0];
var oButton=document.getElementById("btn1");
var ispeedX=5;
var ispeedY=4;
var old_left=0;
var old_top=0;
var xzyinzi=0.7; //值越接近1 弹性越好
oButton.onclick=function(){
startMove(oDiv);
}
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
var evx=oEvent.clientX-oDiv.offsetLeft+scrollLeft;
var evy=oEvent.clientY-oDiv.offsetTop+scrollTop;
document.onmousemove=function(ev){
var oEvent=ev||event;
var curx=scrollTop+oEvent.clientX;
var cury=scrollLeft+oEvent.clientY;
var left_t=curx-evx;
var top_t=cury-evy;
var oWinWidth=document.body.clientWidth||document.documentElement.clientWidth;
var oWinHeight=document.body.clientHeight||document.documentElement.clientHeight;
//限制不能出界
if(left_t<0){
left_t=0;
}else if(left_t>oWinWidth-oDiv.offsetWidth){
left_t=oWinWidth-oDiv.offsetWidth;
}
if(top_t<0){
top_t=0;
}else if(top_t>oWinHeight-oDiv.offsetHeight){
top_t=oWinHeight-oDiv.offsetHeight;
}
ispeedX=left_t-old_left;
ispeedY=top_t-old_top;
oDiv.style.left=left_t+"px";
oDiv.style.top=top_t+"px";
old_left=left_t;
old_top=top_t;
return false;
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
startMove(oDiv);
}
}
function startMove(obj){
clearInterval(obj.timer);
var oWinWidth=document.body.clientWidth||document.documentElement.clientWidth;
var oWinHeight=document.body.clientHeight||document.documentElement.clientHeight;
obj.timer=setInterval(function(){
ispeedY+=1; //值越大 物体越重
var left=oDiv.offsetLeft+ispeedX;
var top=oDiv.offsetTop+ispeedY;
if(left>oWinWidth-oDiv.offsetWidth){
left=oWinWidth-oDiv.offsetWidth;
ispeedX*=-xzyinzi;
}else if(left<0){
left=0;
ispeedX*=-xzyinzi;
}
if(top>=oWinHeight-oDiv.offsetHeight){
top=oWinHeight-oDiv.offsetHeight;
ispeedY*=-xzyinzi;
ispeedX*=xzyinzi; //不管上下怎么碰撞，x 左右的运动时时刻刻都在减小
}else if(top<0){
ispeedY*=-1;
ispeedX*=xzyinzi; //不管上下怎么碰撞，x 左右的运动时时刻刻都在减小
top=0;
}
//判断，当上下的速度的绝对值小于1，就停止
if(Math.abs(ispeedY)<1){
ispeedY=0;
}
if(Math.abs(ispeedX)<1){
ispeedX=0;
}
if(ispeedY==0 && ispeedX==0 && top==oWinHeight-oDiv.offsetHeight){
clearInterval(obj.timer);
document.title="top:"+oWinHeight+"-------"+(oWinHeight-oDiv.offsetHeight);
}else{
oDiv.style.left=left+"px";
oDiv.style.top=top+"px";
}
},5);
}
}
function getWindowSize(){
var width=document.documentElement.clientWidth||document.body.clientWidth;
var height=document.documentElement.clientHeight||document.body.clientHeight;
return {"h":height,"w":width};
}
function getStyle(obj,cssName){
if(obj.currentStyle){
return obj.currentStyle[cssName];
}else{
return getComputedStyle(obj,false)[cssName];
}
}
</script>
</head>
<body>
<input type="button" id="btn1" value="运动" />
<div class="div1"></div>
</body>
</html>