初步製作拖拽div以及彈出層 以及 切換標籤

2021-09-01 19:20:56 字數 2372 閱讀 4154

html**:

賬 號:

密 碼:

css**:

body

#login

#screen

js**(需要引入jquery)下面的document.documentelement可以用

document代替

$(function());

//登陸框繫結滑鼠按下的事件

$("#login").bind('mousedown',function(e)

//繫結滑鼠移動的事件(這裡是給整個窗體繫結的,但是為了相容ie,不使用window,注意也不是繫結login這個div)

$(document.documentelement).bind('mousemove',function(e2));

});});

//繫結滑鼠彈起的事件(這裡是給整個窗體繫結的,但是為了相容ie,不使用window,注意也不是繫結login這個div)

$(document.documentelement).bind('mouseup',function()

});});

上面的mousemove和mouseup事件繫結到document.documentelement上面,而不是login這個div上面,也不是window上面,因為window的話,在ie裡面不相容,在login這個div上面的話,會出現div跟不上滑鼠移動的情況,是為了解決滑鼠移動較快的時候,div不能跟上滑鼠的移動節奏所導致的一些bug。。。

如果上面login這個div的定位不是使用的top:50,left:50%,而是通過畫素來定位的話,需要注意:

//獲取滑鼠位置:

e.clientx,e.clienty

//獲取login這個div的左上角的實際位置:

var _login = document.getelementbyid("login");

top = _login.offsettop;

left = _login.offsetleft;

//獲取login這個div的寬高:

width = _login.offsetwidth;

height = _login.offsetheight;

//獲取瀏覽器實際大小:

if(typeof window.innerheight != 'undefined'));

}else);

}

切換標籤小demo(jquery權威指南例子):

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

aaaaaa

提示框跟隨滑鼠移動:

關於使用者研究的一點思考

實現Div拖拽

直觀的理解div拖拽 當滑鼠對著可拖拽部分按住後並拖動,div會跟著滑鼠一起運動,並且其運動空間限制在瀏覽器內部,當放開滑鼠時,則div停止運動。實現div拖拽需要三個重要的事件 1 onmousedown 滑鼠按下事件 2 onmousemove 滑鼠移動事件 3 onmouseup 滑鼠抬起事件...

滑鼠拖拽div元素

上圖中綠色箭頭指向的分別是3個事件,大概的意思是 滑鼠單擊div box元素後,啟用了document.onmousemove滑鼠移動事件,在移動滑鼠時,會改變div box的left top值,從而達到div box元素隨著滑鼠移動。單滑鼠放開時觸發了document.onmouseup滑鼠鬆開事...

物件導向div拖拽

html css div js odiv.onmousedown function ev document.onmousemove function ev else if l document.documentelement.clientwidth odiv.offsetwidth 縱向 if t ...