js實(shí)現(xiàn)div在頁(yè)面拖動(dòng)效果
本文實(shí)例講述了js實(shí)現(xiàn)div在頁(yè)面拖動(dòng)效果。分享給大家供大家參考,具體如下:
<style type="text/css"> body { margin: 0px; } #div1 { display: none; position: absolute; z-index: 1000; height: 100%; width: 100%; background: #000000; filter:Alpha(opacity=30); } #div2 { display: none; position: absolute; height: 100%; width: 100%; padding-top: 10%; z-index: 1001; } #div3 { display: block; position: absolute; z-index: 999; } </style> <script type="text/javascript"> //定義移動(dòng)對(duì)象和移動(dòng)坐標(biāo) var Mouse_Obj="none",_x,_y; //拖動(dòng)對(duì)象函數(shù)(自動(dòng)) document.onmousemove=function() { if(Mouse_Obj!=="none") { document.getElementById(Mouse_Obj).style.left=_x+event.x; document.getElementById(Mouse_Obj).style.top=_y+event.y; event.returnValue=false; } } //停止拖動(dòng)函數(shù)(自動(dòng)) document.onmouseup=function() { Mouse_Obj="none"; } //確定被拖動(dòng)對(duì)象函數(shù) o為被拖動(dòng)對(duì)象 function m(o) { Mouse_Obj=o; _x=parseInt(document.getElementById(Mouse_Obj).style.left)-event.x; _y=parseInt(document.getElementById(Mouse_Obj).style.top)-event.y; } </script> <div id="div1"></div> <div id="div2" onmousedown="m(this.id)" style="left: 0px;top: 0px;"> <table width="50%" border="0" cellpadding="3" cellspacing="1" style="background: #ff7300; position:static;filter:progid:DXImageTransform.Microsoft.DropShadow (color=#666666,offX=4,offY=4,positives=true)" align="left"> <tr style="cursor: move;"> <td><font color="#FFFFFF">溫馨提示:</font></td> <td align="right"><input type="button" value="x" onClick="document.getElementById ('div1').style.display='none';document.getElementById ('div2').style.display='none';" style="cursor: hand;"></td> </tr> <tr> <td colspan="2" width="100%" bgcolor="#FFFFFF" height="150" align="middle">歡迎訪問(wèn) <a href="http://www.dbjr.com.cn">http://www.dbjr.com.cn</a></td> </tr> </table> </div> <div id="div3"><input type="button" value="打開層" onClick="document.getElementById ('div1').style.display='block';document.getElementById ('div2').style.display='block';"></div>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- js實(shí)現(xiàn)懸浮窗效果(支持拖動(dòng))
- js 鼠標(biāo)拖動(dòng)對(duì)象 可讓任何div實(shí)現(xiàn)拖動(dòng)效果
- js實(shí)現(xiàn)可拖動(dòng)DIV的方法
- 比較精簡(jiǎn)的Javascript拖動(dòng)效果函數(shù)代碼
- javascript 事件處理、鼠標(biāo)拖動(dòng)效果實(shí)現(xiàn)方法詳解
- 鼠標(biāo)拖動(dòng)動(dòng)態(tài)改變表格的寬度的js腳本 兼容ie/firefox
- 利用javascript移動(dòng)div層-javascript 拖動(dòng)層
- javascript div 彈出可拖動(dòng)窗口
- 使用ExtJS技術(shù)實(shí)現(xiàn)的拖動(dòng)樹結(jié)點(diǎn)
- js實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能
相關(guān)文章
JavaScript學(xué)習(xí)筆記之DOM操作實(shí)例分析
這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之DOM操作,結(jié)合實(shí)例形式分析了javascript針對(duì)dom元素的獲取、設(shè)置相關(guān)操作常用函數(shù)使用技巧,需要的朋友可以參考下2019-01-01JavaScript隨機(jī)數(shù)的組合問(wèn)題案例分析
這篇文章主要介紹了JavaScript隨機(jī)數(shù)的組合問(wèn)題,結(jié)合具體案例形式分析了JavaScript隨機(jī)數(shù)的組合問(wèn)題相關(guān)算法原理、實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2020-05-05一文搞懂JavaScript中bind,apply,call的實(shí)現(xiàn)
bind、call和apply都是Function原型鏈上面的方法,因此不管是使用function聲明的函數(shù),還是箭頭函數(shù)都可以直接調(diào)用。本文就帶你看看如何實(shí)現(xiàn)bind、call和apply2022-06-06javascript中apply和call方法的作用及區(qū)別說(shuō)明
本篇文章主要是對(duì)javascript中apply和call方法的作用及區(qū)別進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)(函數(shù)節(jié)流)
這篇文章主要介紹了微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)問(wèn)題(函數(shù)節(jié)流),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09