快捷導(dǎo)航

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

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

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

<!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="vvxyksv9kd"   id="box"> <h2><a href="javascript:;">點(diǎn)擊回放拖動(dòng)軌跡</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需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)完美拖拽效果可拖動(dòng)層與回放拖動(dòng)規(guī)跡并顯示拖動(dòng)距離參數(shù)
一個(gè)完美的JS拖拽功能，實(shí)現(xiàn)層在網(wǎng)頁(yè)上任意拖動(dòng)，還可回放拖動(dòng)規(guī)跡，而且在拖動(dòng)時(shí)顯示拖動(dòng)距離參數(shù)等相關(guān)屬性。經(jīng)本人測(cè)試兼容性也是相當(dāng)不錯(cuò)的代碼，學(xué)習(xí)JavaScript的朋友，可以拿來(lái)研究研究，您可不要錯(cuò)過(guò)哦
2012-12-12
純CSS實(shí)現(xiàn)撲克牌效果
純CSS實(shí)現(xiàn)撲克牌效果，太牛了吧？開始我還以為是一張圖片呢，后來(lái)發(fā)現(xiàn)代碼里沒(méi)有調(diào)用任何圖片，頓時(shí)有點(diǎn)詫異，CSS果然很牛，或是作者水平比較牛？
2010-09-09
帶你快速上手前端響應(yīng)式布局與Bootstrap柵格系統(tǒng)
這篇文章帶你快速上手前端響應(yīng)式布局與Bootstrap柵格系統(tǒng),響應(yīng)式布局主要是針對(duì)各種不同尺寸的屏幕兼容性問(wèn)題,需要的朋友可以參考下
2023-03-03
代碼非常簡(jiǎn)潔且兼容多瀏覽器的拖動(dòng)層實(shí)現(xiàn)代碼
代碼非常簡(jiǎn)潔且兼容多瀏覽器的拖動(dòng)層的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2011-01-01
JS實(shí)現(xiàn)用鍵盤控制DIV上下左右+放大縮小與變色
用鍵盤控制DIV，紅色方塊為鍵盤操作區(qū)域，您可以進(jìn)行如下操作:左右控制;背景變?yōu)榫G色;背景變?yōu)辄S色;背景變?yōu)樗{(lán)色放大或縮小
2012-12-12
基于jQuery的彈出隱藏層的窗口特效
jQuery彈出隱藏層的窗口特效，缺少了幾個(gè)小圖片，這個(gè)自己制作幾個(gè)補(bǔ)上去吧，這不是關(guān)鍵的東西。
2011-08-08
基于jQuery實(shí)現(xiàn)下拉收縮(展開與折疊)特效
jQuery下拉收縮特效，點(diǎn)擊下邊那個(gè)按鈕，就可實(shí)現(xiàn)下拉的效果，也叫展開與折疊的效果，使用了jQuery插件，如何不習(xí)慣使用jquery插件的朋友當(dāng)然使用純Js也能實(shí)現(xiàn)哦，但是jquery現(xiàn)在這么流行，值得學(xué)習(xí)一下哦
2012-12-12
兼容性非常好的js右下角與漂浮廣告代碼
兼容性非常好的js右下角與漂浮廣告代碼，需要的朋友可以參考下。
2010-11-11
始終在頁(yè)面底部的層js實(shí)現(xiàn)代碼
其實(shí)就是通過(guò)js將層始終定位在底部，多用于提示效果
2012-11-11
js超漂亮的鼠標(biāo)提示，帶人性化缺口
漂亮的鼠標(biāo)提示，帶人性化缺口，在測(cè)試時(shí)候大家可改變?yōu)g覽器窗口大小，可以看到缺口會(huì)根據(jù)網(wǎng)頁(yè)的大小智能改變方向，以確保提示位置的正確性，其實(shí)由此大家可以學(xué)習(xí)到更多的JavaScript與CSs代碼知識(shí)。
2010-11-11