JS實(shí)現(xiàn)動態(tài)移動層及拖動浮層關(guān)閉的方法
更新時間:2015年04月30日 10:19:28 作者:休閑生活文化
這篇文章主要介紹了JS實(shí)現(xiàn)動態(tài)移動層及拖動浮層關(guān)閉的方法,可實(shí)現(xiàn)動態(tài)拖動浮動窗口及關(guān)閉窗口的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)動態(tài)移動層及拖動浮層關(guān)閉的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<html> <head> <title>動態(tài)移動的層</title> <body bgcolor="#ADBAC9"> <div id="div1" class="yellow" style="VISIBILITY:visible ; background-color:#FFFF00; position: absolute; top: 60; left: 200; width: 360; height: 250; filter: revealTrans(transition=12, 'duration=0.1) blendTrans(duration=0.1) "> <div id=title onmousedown=DIVDown("div1") style="background-color:#30608F;padding:2px; font-size:13px;text-indent:5; color:#FFFFFF;cursor:move">標(biāo)題</div> <img id=close onclick=Hide(div1) style="position: absolute; right: 2; top: 2" border="0" src="close.gif" width="15" height="15"> </div> <script language="JavaScript"> var Obj="none"; var pX var pY document.onmousemove=DIVMove; document.onmouseup=DIVUp; function DIVDown(tag){ Obj=tag; pX=parseInt(document.all(Obj).style.left)-event.x; pY=parseInt(document.all(Obj).style.top)-event.y; } function DIVMove(){ if(Obj!="none"){ document.all(Obj).style.left=pX+event.x; document.all(Obj).style.top=pY+event.y; event.returnValue=false; } } function DIVUp(){Obj="none";} function Hide(divid){ divid.filters.revealTrans.apply(); divid.style.visibility = "hidden"; divid.filters.revealTrans.play(); } </script> </body> </html>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS實(shí)現(xiàn)超簡單的鼠標(biāo)拖動效果
- JS響應(yīng)鼠標(biāo)點(diǎn)擊實(shí)現(xiàn)兩個滑塊區(qū)間拖動效果
- JS實(shí)現(xiàn)左右拖動改變內(nèi)容顯示區(qū)域大小的方法
- js實(shí)現(xiàn)div拖動動畫運(yùn)行軌跡效果代碼分享
- avalon js實(shí)現(xiàn)仿微博拖動圖片排序
- JS實(shí)現(xiàn)彈出浮動窗口(支持鼠標(biāo)拖動和關(guān)閉)實(shí)例詳解
- JS實(shí)現(xiàn)可縮放、拖動、關(guān)閉和最小化的浮動窗口完整實(shí)例
- js用拖動滑塊來控制圖片大小的方法
- Js可拖拽放大的層拖動特效實(shí)現(xiàn)方法
- JS+CSS實(shí)現(xiàn)可拖動的彈出提示框
- js實(shí)現(xiàn)圖片拖動改變順序附圖
- JS實(shí)現(xiàn)的自定義網(wǎng)頁拖動類
相關(guān)文章
一文教會你如何在JavaScript中使用展開運(yùn)算符
展開運(yùn)算符(spread operator)允許一個表達(dá)式在某處展開,下面這篇文章主要給大家介紹了關(guān)于如何通過一文教會你如何在JavaScript中使用展開運(yùn)算符的相關(guān)資料,需要的朋友可以參考下2022-10-10bootstrap fileinput完整實(shí)例分享
這篇文章主要為大家分享文件上傳組件bootstrap fileinput完整實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11javascript面向?qū)ο笕筇卣髦庋b實(shí)例詳解
這篇文章主要介紹了javascript面向?qū)ο笕筇卣髦庋b,簡單描述了封裝的基本概念、原理,并結(jié)合實(shí)例形式詳細(xì)分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中封裝的用法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-07-07基于JavaScript實(shí)現(xiàn)全選、不選和反選效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)全選、不選和反選效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02JavaScript 擴(kuò)展運(yùn)算符用法實(shí)例小結(jié)【基于ES6】
這篇文章主要介紹了JavaScript 擴(kuò)展運(yùn)算符用法,結(jié)合實(shí)例形式總結(jié)分析了基于ES6的擴(kuò)展運(yùn)算符基本概念與使用相關(guān)操作技巧,需要的朋友可以參考下2019-06-06