用javascript写了个可以拖拽的小窗口程序作者:Andrew 日期:2006-02-15不知道大家有没有上过周博通这个网站 http://my./
上面的面板可以自由拖拽和隐藏关闭 很酷的效果 不过都是模仿国外的哈 最近看了很多这种类似的站点 比如MS的http://www./ 发现有一个趋势 就是用户自定义的东西越来越多 并且越来越高级 就是所谓的web2.0吧 不过话又说回来 在中国要想推行这样的风潮 可能还要过段时间 因为中国大多数网民的文化层次还不到这个水平 闲话不多说了 给大家介绍一下我写的这个程序 看了效果以后模仿的 不过还是有很多bug哈 首先介绍一下这个程序的一些相关事件和方法： event.button：事件发生时表示鼠标的动作 如果为1则是鼠标左键 2为鼠标右键 不过现在好像MS都已经有8个值了 难道以后鼠标的发展方向是8个键？ parentNode：父节点 event.ClientX：事件发生时的鼠标x值 event.ClientY：事件发生时的鼠标Y值 setCapture()方法：建立对象和鼠标之间的通讯 也就是说鼠标作用在此对象上时才跟踪鼠标 releaseCapture()方法：切断对象和鼠标之间的通讯 javascript程序如下：  程序代码<script> var move=false; function StartDrag(obj) //定义准备拖拽的函数 { if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV")//判断事件发生地点 防止无效拖拽 { obj.setCapture(); //对当前对象的鼠标动作进行跟踪 obj.style.background="#999"; //改变颜色 move=true; } } function Drag(obj) //定义拖拽函数 { if(move) { var oldwin=obj.parentNode; //定义父对象 oldwin.style.left=event.clientX-50;//定义父对象目前位置 oldwin.style.top=event.clientY-10; } } function StopDrag(obj) //定义停止拖拽函数 { obj.style.background="#000"; //改变颜色 obj.releaseCapture(); //停止对当前对象的鼠标跟踪 move=false; } </script> 具体html代码： <html>
<body> <style>
body{font-family:Verdana;font-size:11px;color:#333;} #win1{[position:absolute;left:100;top:100;width:200px;height:150px;border:1px solid #000;} .title{width:100%;background:#000;height:18px;color:#fff;cursor:hand;} </style> <script> var move=false; function StartDrag(obj) { if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV") { obj.setCapture(); obj.style.background="#999"; move=true; } } function Drag(obj)
{ if(move) { var oldwin=obj.parentNode; oldwin.style.left=event.clientX-50; oldwin.style.top=event.clientY-10; } } function StopDrag(obj)
{ obj.style.background="#000"; obj.releaseCapture(); move=false; } </script>
<div id="win1">
<div class="title" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)" >窗口1</div> This is a moveable window.<br> Moreinfo in www. . </div> </body>
</html> |
|
|
