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