javascript 实现拖动

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <meta  http-equiv="refesh" content="2"/>
  <%--  <script language="javascript" type="text/javascript">
        document.write("输入一个数");
        var str = prompt("请输入一个数","");
        var result = eval(str);
        document.write(str+result);
    </script>--%>
        <script language="javascript" type="text/javascript">
       
    </script>
</head>
<body>
    <form id="form1" runat="server">
   <a href="#"  onmousemove = "document.all.Layer1.style.visibility='visible'">fdsafdafdafd</a>
    <div style="width:140px; height:140px; background-color:orange; cursor:pointer"></div>
   
   
    <div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="divBlock" onmousedown="divBlock_event_mousedown();">I am a div.</div>
<script>
function divBlock_event_mousedown(){
  document.onmousemove=document_event_mousemove;
 
  var I_do_not_care=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,"");
}

function document_event_mousemove(e){
  var e, obj;
  obj=document.getElementById("divBlock");
  e=window.event?window.event:e;
obj.firstChild.nodeValue=e.clientX+":"+e.clientY;
}

function document_event_mouseup(e){
 document.onmousemove="";
 var I_do_not_care=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,"");
}
</script>
<script>
function divBlock_event_mousedown(e){
 var e, obj, temp;
  obj=document.getElementById("divBlock");
  e=window.event?window.event:e;
  obj.startX=e.clientX-obj.offsetLeft;
  obj.startY=e.clientY-obj.offsetTop;
 
  document.onmousemove=document_event_mousemove;
  temp=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,"");
}

function document_event_mousemove(e){
  var e, obj;
  obj=document.getElementById("divBlock");
  e=window.event?window.event:e;
 
  with(obj.style){
   position="absolute";
   left=e.clientX-obj.startX+"px";
   top=e.clientY-obj.startY+"px";
  }
}

function document_event_mouseup(e){
 var temp;
 document.onmousemove="";
 temp=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,"");
}
</script>
 
 
<div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="div2" >

<div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="div1" onmousedown="divBlock_event_mousedown(arguments[0]);"></div>
</div>
<script>
f=0.95; // 运动阻尼
k=0.85; // 碰撞弹性系数
g=1; // 重力加速度

window.onload=init;

function init(){
 var obj;
  obj=document.getElementById("divBlock");
 
  obj.speedX=parseInt(Math.random()*5);
  obj.speedY=parseInt(Math.random()*5);
 
  obj.move=function(){
   // 这里俺暂时不写,呵呵
  }
}
</script>

 
<div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="div3" ></div>
<script>
f=0.95; // 运动阻尼
k=0.85; // 碰撞弹性系数
g=1; // 重力加速度

window.onload=init;

function init(){
 var obj;
  obj=document.getElementById("divBlock");
 
  obj.speedX=parseInt(Math.random()*5);
  obj.speedY=parseInt(Math.random()*5);
 
  obj.move=function(){
   // 这里俺暂时不写,呵呵
  }
}
</script>

<div style="width:140px; height:140px; background-color:pink; cursor:pointer; position:absolute;" id="div4" ></div>
<script>
f=0.005; // 运动阻尼
k=0.7; // 碰撞弹性系数
g=1; // 重力加速度
var obj;

window.onload=init;

function init(){
 obj=document.getElementById("divBlock");
 
  obj.speedX=140;
  obj.speedY=400;
 
  obj.move=function(){
   var x, y, mx, my;
   x=this.offsetLeft;
   y=this.offsetTop;
   mx=document.body.clientWidth-this.offsetWidth; // 计算允许运动的最大范围
   my=document.body.clientHeight-this.offsetHeight;
   this.speedY+=g; // 计算重力加速度影响的y方向速度
   this.speedX-=f*this.speedX*this.speedX*(this.speedX>0?1:-1); // 计算阻尼后的速度
   this.speedY-=f*this.speedY*this.speedY*(this.speedY>0?1:-1); // 阻尼大小和速度平方成正比
   if(Math.abs(this.speedX)>mx||Math.abs(this.speedY)>my){ this.speedX=this.speedX%mx; this.speedY=this.speedY%my; }
   x+=this.speedX; y+=this.speedY; // 计算坐标
   if(x<0){ x=-x; this.speedX=Math.abs(this.speedX)*k; } // 计算边界碰撞
   if(y<0){ y=-y; this.speedY=Math.abs(this.speedY)*k; }
   if(x>mx){ x=mx*2-x; this.speedX=-Math.abs(this.speedX)*k; }
   if(y>my){ y=my*2-y; this.speedY=-Math.abs(this.speedY)*k; }
   if(Math.abs(this.speedX)<1)this.speedX=0; // 消除数据下溢
   if(Math.abs(my-y)<4&&Math.abs(this.speedY)<4){ y=my; this.speedY=0; } // 消除临界状态的抖动
   this.style.left=parseInt(x)+"px"; // 实现移动
   this.style.top=parseInt(y)+"px";
  }
 
  setInterval("obj.move();",10);
}
</script>
 
<div style="width:140px; height:140px; background-color:pink; cursor:pointer; position:absolute;" id="div5" ></div>
<script>
f=0.005; // 运动阻尼
k=0.7; // 碰撞弹性系数
g=1; // 重力加速度
var obj, timeHandle;

window.onload=init;

function init(){
 obj=document.getElementById("divBlock");
 
  obj.speedX=140;
  obj.speedY=400;
 
  obj.move=function(){
   var x, y, mx, my;
   x=this.offsetLeft;
   y=this.offsetTop;
   mx=document.body.clientWidth-this.offsetWidth; // 计算允许运动的最大范围
   my=document.body.clientHeight-this.offsetHeight;
   this.speedY+=g; // 计算重力加速度影响的y方向速度
   this.speedX-=f*this.speedX*this.speedX*(this.speedX>0?1:-1); // 计算阻尼后的速度
   this.speedY-=f*this.speedY*this.speedY*(this.speedY>0?1:-1); // 阻尼大小和速度平方成正比
   if(Math.abs(this.speedX)>mx||Math.abs(this.speedY)>my){ this.speedX=this.speedX%mx; this.speedY=this.speedY%my; }
   x+=this.speedX; y+=this.speedY; // 计算坐标
   if(x<0){ x=-x; this.speedX=Math.abs(this.speedX)*k; } // 计算边界碰撞
   if(y<0){ y=-y; this.speedY=Math.abs(this.speedY)*k; }
   if(x>mx){ x=mx*2-x; this.speedX=-Math.abs(this.speedX)*k; }
   if(y>my){ y=my*2-y; this.speedY=-Math.abs(this.speedY)*k; }
   if(Math.abs(this.speedX)<1)this.speedX=0; // 消除数据下溢
   if(Math.abs(my-y)<4&&Math.abs(this.speedY)<4){ y=my; this.speedY=0; } // 消除临界状态的抖动
   this.style.left=parseInt(x)+"px"; // 实现移动
   this.style.top=parseInt(y)+"px";
   this.timeHandle=setTimeout("obj.move();",10);
  }
 
  obj.stop=function(){
   clearTimeout(this.timeHandle);
  }
 
  obj.onmousedown=function(){ this.stop(); }
  obj.onmouseup=function(){ this.move(); }
 
  obj.move();
}
</script>
 
 
<div style="width:140px; height:140px; background-color:pink; cursor:pointer; position:absolute;" id="div6" ></div>
<script>

f=0.003; // 运动阻尼
k=0.8; // 碰撞弹性系数
g=0.6; // 重力加速度
var obj, timeHandle;

window.onload=init;

function init(){
 obj=document.getElementById("divBlock");
 
  obj.speedX=0;
  obj.speedY=0;
  obj.lastX=obj.offsetLeft;
  obj.lastY=obj.offsetTop;
 
  obj.move=function(){
   this.stop();
   var x, y, mx, my;
   x=this.offsetLeft;
   y=this.offsetTop;
   mx=document.body.clientWidth-this.offsetWidth; // 计算允许运动的最大范围
   my=document.body.clientHeight-this.offsetHeight;
   this.speedY+=g; // 计算重力加速度影响的y方向速度
   this.speedX-=f*this.speedX*this.speedX*(this.speedX>0?1:-1); // 计算阻尼后的速度
   this.speedY-=f*this.speedY*this.speedY*(this.speedY>0?1:-1); // 阻尼大小和速度平方成正比
   if(Math.abs(this.speedX)>mx||Math.abs(this.speedY)>my){ this.speedX=this.speedX%mx; this.speedY=this.speedY%my; }
   x+=this.speedX; y+=this.speedY; // 计算坐标
   if(x<0){ x=-x; this.speedX=Math.abs(this.speedX)*k; } // 计算边界碰撞
   if(y<0){ y=-y; this.speedY=Math.abs(this.speedY)*k; }
   if(x>mx){ x=mx*2-x; this.speedX=-Math.abs(this.speedX)*k; }
   if(y>my){ y=my*2-y; this.speedY=-Math.abs(this.speedY)*k; }
   if(Math.abs(this.speedX)<1)this.speedX=0; // 消除数据下溢
   if(Math.abs(my-y)<4&&Math.abs(this.speedY)<4){ y=my; this.speedY=0; } // 消除临界状态的抖动
   this.style.left=parseInt(x)+"px"; // 实现移动
   this.style.top=parseInt(y)+"px";
   this.timeHandle=setTimeout("obj.move();",10);
  }
 
  obj.stop=function(){
   clearTimeout(this.timeHandle);
  }
 
  obj.onmousedown=function(){ this.stop(); divBlock_event_mousedown(arguments[0]); }
 
  obj.move();
}

function divBlock_event_mousedown(e){
 var e, temp;
  e=window.event?window.event:e;
  obj.startX=e.clientX-obj.offsetLeft;
  obj.startY=e.clientY-obj.offsetTop;
 
  document.onmousemove=document_event_mousemove;
  temp=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,"");
}

function document_event_mousemove(e){
  var e;
  e=window.event?window.event:e;
 
  with(obj.style){
   position="absolute";
   left=e.clientX-obj.startX+"px";
   top=e.clientY-obj.startY+"px";
  }
  obj.speedX=(obj.offsetLeft-obj.lastX)*3;
  obj.speedY=(obj.offsetTop-obj.lastY)*3;
  obj.lastX=obj.offsetLeft;
  obj.lastY=obj.offsetTop;
}

function document_event_mouseup(e){
 var temp;
 document.onmousemove="";
 temp=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,"");
 obj.move();
}
</script>
    </form>
</body>
</html>
 

阅读更多
换一批

没有更多推荐了,返回首页