This article describes the JS implementation div in the page drag effect. Share to everyone for your reference, specific as follows:
<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" >//Define Move objects and move coordinates var mouse_obj= "none", _x,_y; Drag object function (Auto) 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;
Stop the Drag function (Auto) document.onmouseup=function () {mouse_obj= "none";}//Make sure the dragged Object function O is the dragged object functions 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" > Warm tips:</font></td> <td align= "right" ><input type= " Button "value=" x "onclick=" document.getElementById (' Div1 '). style.display= ' None ';d ocument.getelementbyid (' Div2 '). Style.display= ' None '; "style=" Cursor:hand; " ></td> </tr> <tr> <td colspan= "2" width= "100%" bgcolor= "#FFFFFF" "height=" align= "" Middle "&G" t; Welcome to <a href= "http://www.jb51.net" >http://www.jb51.net</a></td> </tr> </table> < /div> <div id= "Div3" ><input type= "button" value= "Open layer" onclick= "document.getElementById (' Div1 '). style.display= ' block ';d ocument.getelementbyid (' Div2 '). Style.display= ' block ';
></div>
More readers interested in JavaScript-related content can view the site topics: "JavaScript switching effects and tips summary", "JavaScript Search Algorithm Skills Summary", "JavaScript animation effects and tips summary", " JavaScript error and debugging skills Summary, JavaScript data structure and algorithm skills summary, JavaScript traversal algorithm and skills summary and JavaScript mathematical calculation usage Summary
I hope this article will help you with JavaScript programming.