用javascript寫了個(gè)可以拖拽的小窗口程序作者:Andrew 日期:2006-02-15不知道大家有沒(méi)有上過(guò)周博通這個(gè)網(wǎng)站 http://my./
上面的面板可以自由拖拽和隱藏關(guān)閉 很酷的效果 不過(guò)都是模仿國(guó)外的哈 最近看了很多這種類似的站點(diǎn) 比如MS的http://www./ 發(fā)現(xiàn)有一個(gè)趨勢(shì) 就是用戶自定義的東西越來(lái)越多 并且越來(lái)越高級(jí) 就是所謂的web2.0吧 不過(guò)話又說(shuō)回來(lái) 在中國(guó)要想推行這樣的風(fēng)潮 可能還要過(guò)段時(shí)間 因?yàn)橹袊?guó)大多數(shù)網(wǎng)民的文化層次還不到這個(gè)水平 閑話不多說(shuō)了 給大家介紹一下我寫的這個(gè)程序 看了效果以后模仿的 不過(guò)還是有很多bug哈 首先介紹一下這個(gè)程序的一些相關(guān)事件和方法： event.button：事件發(fā)生時(shí)表示鼠標(biāo)的動(dòng)作 如果為1則是鼠標(biāo)左鍵 2為鼠標(biāo)右鍵 不過(guò)現(xiàn)在好像MS都已經(jīng)有8個(gè)值了 難道以后鼠標(biāo)的發(fā)展方向是8個(gè)鍵？ parentNode：父節(jié)點(diǎn) event.ClientX：事件發(fā)生時(shí)的鼠標(biāo)x值 event.ClientY：事件發(fā)生時(shí)的鼠標(biāo)Y值 setCapture()方法：建立對(duì)象和鼠標(biāo)之間的通訊 也就是說(shuō)鼠標(biāo)作用在此對(duì)象上時(shí)才跟蹤鼠標(biāo) releaseCapture()方法：切斷對(duì)象和鼠標(biāo)之間的通訊 javascript程序如下：  程序代碼<script> var move=false; function StartDrag(obj) //定義準(zhǔn)備拖拽的函數(shù) { if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV")//判斷事件發(fā)生地點(diǎn) 防止無(wú)效拖拽 { obj.setCapture(); //對(duì)當(dāng)前對(duì)象的鼠標(biāo)動(dòng)作進(jìn)行跟蹤 obj.style.background="#999"; //改變顏色 move=true; } } function Drag(obj) //定義拖拽函數(shù) { if(move) { var oldwin=obj.parentNode; //定義父對(duì)象 oldwin.style.left=event.clientX-50;//定義父對(duì)象目前位置 oldwin.style.top=event.clientY-10; } } function StopDrag(obj) //定義停止拖拽函數(shù) { obj.style.background="#000"; //改變顏色 obj.releaseCapture(); //停止對(duì)當(dāng)前對(duì)象的鼠標(biāo)跟蹤 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> |
|
|
