快捷導(dǎo)航

js實現(xiàn)完美拖拽效果可拖動層與回放拖動規(guī)跡并顯示拖動距離參數(shù)

更新時間：2012年12月26日 10:18:49 作者：

一個完美的JS拖拽功能，實現(xiàn)層在網(wǎng)頁上任意拖動，還可回放拖動規(guī)跡，而且在拖動時顯示拖動距離參數(shù)等相關(guān)屬性。經(jīng)本人測試兼容性也是相當不錯的代碼，學(xué)習(xí)JavaScript的朋友，可以拿來研究研究，您可不要錯過哦

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>完美拖拽</title> <style type="text/css"> html,body{overflow:hidden;} body,div,h2,p{margin:0;padding:0;} body{color:#fff;background:#000;font:12px/2 Arial;} p{padding:0 10px;margin-top:10px;} span{color:#ff0;padding-left:5px;} #box{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;} #box h2{height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;} #box h2 a{color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;} </style>  </head> <body> <div   class="wppm3vysvbp"   id="box"> <h2><a href="javascript:;">點擊回放拖動軌跡</a></h2> <p><strong>Drag:</strong><span></span></p> <p><strong>offsetTop:</strong><span></span></p> <p><strong>offsetLeft:</strong><span></span></p> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

點彈代碼點擊頁面任何位置都可以彈出頁面效果代碼
有時候需要點擊頁面任何位置都可以彈出頁面效果，多用于游戲，導(dǎo)航類網(wǎng)站推廣
2012-09-09
js實現(xiàn)完美拖拽效果可拖動層與回放拖動規(guī)跡并顯示拖動距離參數(shù)
一個完美的JS拖拽功能，實現(xiàn)層在網(wǎng)頁上任意拖動，還可回放拖動規(guī)跡，而且在拖動時顯示拖動距離參數(shù)等相關(guān)屬性。經(jīng)本人測試兼容性也是相當不錯的代碼，學(xué)習(xí)JavaScript的朋友，可以拿來研究研究，您可不要錯過哦
2012-12-12
js漂浮廣告實現(xiàn)代碼（合集經(jīng)典）符合W3C
js漂浮廣告實現(xiàn)代碼，實際上就是一個來回滾動的小圖片，碰到邊緣就返回，也是一種廣告形式，需要的朋友可以收藏下
2012-04-04
代碼非常簡潔且兼容多瀏覽器的拖動層實現(xiàn)代碼
代碼非常簡潔且兼容多瀏覽器的拖動層的實現(xiàn)代碼，需要的朋友可以參考下。
2011-01-01
純CSS實現(xiàn)撲克牌效果
純CSS實現(xiàn)撲克牌效果，太牛了吧？開始我還以為是一張圖片呢，后來發(fā)現(xiàn)代碼里沒有調(diào)用任何圖片，頓時有點詫異，CSS果然很牛，或是作者水平比較牛？
2010-09-09
仿Discuz!的論壇評分發(fā)帖彈出提示并漸漸消失的效果
仿Discuz!論壇評分發(fā)帖彈出提示并漸漸消失的效果，相信不少朋友都見到過這效果吧
2010-10-10
基于jQuery的彈出隱藏層的窗口特效
jQuery彈出隱藏層的窗口特效，缺少了幾個小圖片，這個自己制作幾個補上去吧，這不是關(guān)鍵的東西。
2011-08-08
帶你快速上手前端響應(yīng)式布局與Bootstrap柵格系統(tǒng)
這篇文章帶你快速上手前端響應(yīng)式布局與Bootstrap柵格系統(tǒng),響應(yīng)式布局主要是針對各種不同尺寸的屏幕兼容性問題,需要的朋友可以參考下
2023-03-03
據(jù)說是Google首頁的網(wǎng)頁模塊拖動代碼
據(jù)說是Google首頁的網(wǎng)頁模塊拖動代碼，Google很早就應(yīng)用了網(wǎng)頁拖動特效，不知大家發(fā)現(xiàn)沒？本款拖動特效可以說是完全模仿了Google的拖動代碼，比較有代表性，因此也很有參考價值，奉獻給大家，僅供參考。
2010-09-09
js超漂亮的鼠標提示，帶人性化缺口
漂亮的鼠標提示，帶人性化缺口，在測試時候大家可改變?yōu)g覽器窗口大小，可以看到缺口會根據(jù)網(wǎng)頁的大小智能改變方向，以確保提示位置的正確性，其實由此大家可以學(xué)習(xí)到更多的JavaScript與CSs代碼知識。
2010-11-11