首頁 > web前端 > js教程 > jQuery拖曳div、移動div、彈出層實作原理及範例_jquery

jQuery拖曳div、移動div、彈出層實作原理及範例_jquery

WBOY
發布: 2016-05-16 16:53:02
原創
1264 人瀏覽過

程式碼示範:

http://www.imqing.com/demo/movediv.html

大概原理:

使div的position為絕對定位absolute,然後控制其top與left值,需監聽滑鼠事件,主要用到mousedown, mousemove, mouseup。

在mousedown後,記錄mousedown時滑鼠與需要移動的div的位置,然後取得兩者之差,得到在滑鼠移動後,div的位置。即:

left = 當前滑鼠位置.x - (滑鼠點擊時的.x值- div的初始位置x值)
top = 當前滑鼠位置.y - (滑鼠點擊時的.y值- div的初始位置y值)

代碼:

複製代碼 代碼如下:


代碼如下:



代碼如下:






Qing's Web







這裡是其它內容


<script> <BR>jQuery(document).ready( <BR>function () { <BR>$('#banner').mousedown( <BR>function (event) { <BR>var isMove = true; <BR>var abs_x = event.pageX - $('div.moveBar').offset().left; <BR>var abs_y = event.pageY - $('div.moveBar'). offset().top; <BR>$(document).mousemove(function (event) { <BR>if (isMove) { <BR>var obj = $('div.moveBar'); <BR>obj.css ({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); <BR>} <BR>} <BR>).mouseup( <BR>function () { <BR>isMove = false; <BR>} <BR>); <BR>} <BR>); <BR>} </script>
);
其實程式碼量也不多的,嘿嘿。重點就是需要移動的div的position是絕對定位,然後偵測滑鼠事件就行了。嘿嘿。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板