如何拖动层
点击次数:29 次 发布日期:2008-11-26 22:36:01 作者:源代码网
|
源代码网推荐
下面是一个完整的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>
源代码网供稿. |