這篇文章主要介紹了js實現div在頁面拖動效果,涉及JavaScript動態(tài)操作頁面元素與數值計算的相關技巧,需要的朋友可以參考下

本文實例講述了js實現div在頁面拖動效果。分享給大家供大家參考，具體如下：

<style type="text/css">

body {

 margin: 0px;

}

#div1 {

 display: none;

 position: absolute;

 z-index: 1000;

 height: 100%;

 width: 100%;

 background: #000000;

 filter:Alpha(opacity=30);

}

#div2 {

 display: none;

 position: absolute;

 height: 100%;

 width: 100%;

 padding-top: 10%;

 z-index: 1001;

}

#div3 {

 display: block;

 position: absolute;

 z-index: 999;

}

</style>

<script type="text/javascript">

//定義移動對象和移動坐標

var Mouse_Obj="none",_x,_y;

//拖動對象函數(自動)

document.onmousemove=function()

{

 if(Mouse_Obj!=="none")

 {

 document.getElementById(Mouse_Obj).style.left=_x+event.x;

 document.getElementById(Mouse_Obj).style.top=_y+event.y;

 event.returnValue=false;

 }

}

//停止拖動函數(自動)

document.onmouseup=function()

{

 Mouse_Obj="none";

}

//確定被拖動對象函數 o為被拖動對象

function m(o)

{

 Mouse_Obj=o;

 _x=parseInt(document.getElementById(Mouse_Obj).style.left)-event.x;

 _y=parseInt(document.getElementById(Mouse_Obj).style.top)-event.y;

}

</script>

<div id="div1"></div>

<div id="div2" onmousedown="m(this.id)" style="left: 0px;top: 0px;">

<table width="50%" border="0" cellpadding="3" cellspacing="1"

style="background: #ff7300;

position:static;filter:progid:DXImageTransform.Microsoft.DropShadow

(color=#666666,offX=4,offY=4,positives=true)" align="left">

 <tr style="cursor: move;">

  <td><font color="#FFFFFF">溫馨提示：</font></td>

  <td align="right"><input type="button" value="ｘ"

onClick="document.getElementById

('div1').style.display='none';document.getElementById

('div2').style.display='none';" style="cursor: hand;"></td>

 </tr>

 <tr>

  <td colspan="2" width="100%" bgcolor="#FFFFFF" height="150"

align="middle">歡迎訪問　<a >http://www.jb51.net</a></td>

 </tr>

</table>

</div>

<div id="div3"><input type="button" value="打開層"

onClick="document.getElementById

('div1').style.display='block';document.getElementById

('div2').style.display='block';"></div>

希望本文所述對大家JavaScript程序設計有所幫助。