萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery拖動div、移動div、彈出層實現原理及示例
jQuery拖動div、移動div、彈出層實現原理及示例
正如標題所言的實現原理是使div的position為絕對定位absolute，然後控制其top與left值,需要的朋友可以參考下
代碼演示： 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值) 代碼： 代碼如下: <!DOCTYPE html> <html lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Qing's Web</title> <script src="./jquery-1.7.2.min.js" type="text/javascript"></script> <style type="text/css"> .footer { position: fixed; bottom: 0; width: 100%; } .moveBar { position: absolute; width: 250px; height: 300px; background: #666; border: solid 1px #000; } #banner { background: #52CCCC; cursor: move; } </style> </head> <body style="padding-top: 50px;"> <div class="moveBar"> <div id="banner">按住此處移動當前div</div> <div class="content">這裡是其它內容</div> </div> <div class="footer"> <p align="center" class="label">ALL Rights Reserved Qing 版權所有</p> </div> <script> jQuery(document).ready( function () { $('#banner').mousedown( function (event) { var isMove = true; var abs_x = event.pageX - $('div.moveBar').offset().left; var abs_y = event.pageY - $('div.moveBar').offset().top; $(document).mousemove(function (event) { if (isMove) { var obj = $('div.moveBar'); obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); } } ).mouseup( function () { isMove = false; } ); } ); } ); </script> </body> </html> 其實代碼量也不多的，嘿嘿。要點就是需要移動的div的position是絕對定位，然後檢測鼠標事件就行了。嘿嘿。javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved