![]() |
|
如何拖动层
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
广告招租,e-mail:yesize@hotmail.com 下面是一个完整的HTML文档 <html> <head> <script> var down = false; function UpMouse(){ down = false; } var startX = 0; startY = 0;startLeft = 0;startTop = 0; function MoveLayer(){ if (down){ thelayer.style.pixelLeft = startLeft+event.clientX-startX; thelayer.style.pixelTop = startTop+event.clientY-startY; formview.viewpos.value = X:+event.clientX+ Y:+event.clientY+ startX:+startX+ startY:+startY; }//可以观察鼠标的运动 } function DownMouse(){ if (!document.all) return true;//暂时只支持4.0以上的IE浏览器 if (event.srcElement.name==layermove){//对应要拖动的层的name thelayer = event.srcElement; down = true; startX = event.clientX; startY = event.clientY; startLeft = thelayer.style.pixelLeft; startTop = thelayer.style.pixelTop; } } </script> </head> <body onmousedown=DownMouse() onmousemove=MoveLayer() onmouseup=U pMouse()> <form name=formview> <center> <input name=viewpos value= 这里显示鼠标的运动轨迹 size=37 style =border=0;color:white;background:blue> </center><!--隐藏了文本框的边框,这也算是一个DHTML的应用吧。呵呵!--> </form> <div name=layermove style=position:absolute;top:100pt;left:215pt;cu rsor:hand;background:#f5f5ff;width:150pt;height:100pt> <p align=center> 这个层可以拖动?! 不信你试试看!</p> </div> </body> </html>
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||