js實(shí)現(xiàn)div在頁面拖動(dòng)效果
本文實(shí)例講述了js實(shí)現(xiàn)div在頁面拖動(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">歡迎訪問 <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的方法
- 比較精簡的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-01
JavaScript隨機(jī)數(shù)的組合問題案例分析
這篇文章主要介紹了JavaScript隨機(jī)數(shù)的組合問題,結(jié)合具體案例形式分析了JavaScript隨機(jī)數(shù)的組合問題相關(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-06
javascript中apply和call方法的作用及區(qū)別說明
本篇文章主要是對(duì)javascript中apply和call方法的作用及區(qū)別進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02
微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)(函數(shù)節(jié)流)
這篇文章主要介紹了微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)問題(函數(shù)節(jié)流),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09

