div的拖动效果在很多效果中都有应用,当然还有很多附加的功能,本章节只是给拖动效果,并介绍一下它的实现过程。

代码实例如下:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>div拖动效果-51前端</title> 
<style type="text/css">
#oDiv
{
  position:absolute;
  width:100px;
  height:60px;
  border:1px solid silver;
  left:100px;
  top:100px;
  z-index:9999;
}
#move
{
  cursor:move;
  width:100%;
  height:15px;
  background-color:#0066cc; 
  font-size:10px;
}
#close
{
  float:right; 
  width:10px; 
  height:100%; 
  cursor:hand; 
  background-color:#cc3333; 
  color:White;
  font-size:15px;
}
</style>
<script type='text/javascript'> 
var offset_x; 
var offset_y; 
function Milan_StartMove(oEvent,div_id) 
{ 
  var whichButton; 
  if(document.all&&oEvent.button==1)
  {
    whichButton=true; 
  } 
  else 
  { 
    if(oEvent.button==0)
      whichButton=true;
  } 
  if(whichButton) 
  { 
    offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft); 
    offset_y=parseInt(oEvent.clientY-oDiv.offsetTop); 
    document.documentElement.onmousemove=function(mEvent) 
    { 
      var eEvent=mEvent||event;
      var oDiv=div_id; 
      var x=eEvent.clientX-offset_x; 
      var y=eEvent.clientY-offset_y; 
      oDiv.style.left=(x)+"px"; 
      oDiv.style.top=(y)+"px"; 
    } 
  } 
} 
function Milan_StopMove(oEvent)
{
  document.documentElement.onmousemove=null; 
} 
function div_Close(o) {o.style.display="none";} 
window.onload=function()
{
  var omove=document.getElementById("move");
  var oclose=document.getElementById("close");
  omove.onmousedown=function(){Milan_StartMove(event,this.parentNode)}
  omove.onmouseup=function(){Milan_StopMove(event)}
  oclose.onclick=function(){div_Close(this.parentNode.parentNode)}
}
</script> 
</head> 
<body> 
<div id="oDiv"> 
  <div id="move"> 
    <div id="close">X</div> 
  </div> 
</div> 
</body> 
</html>

代码描述:js div拖动效果。js实现的div拖动效果实例代码



152 203



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到