Js可拖拽放大的層拖動(dòng)特效實(shí)現(xiàn)方法
更新時(shí)間：2015年02月25日 10:27:15 作者：代碼家園
這篇文章主要介紹了Js可拖拽放大的層拖動(dòng)特效實(shí)現(xiàn)方法,涉及javascript操作DOM元素及css樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了Js可拖拽放大的層拖動(dòng)特效實(shí)現(xiàn)方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!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=gb2312" />
<title>Js實(shí)現(xiàn)層拖動(dòng)效果，還可以拖拽放大</title>
<style>
*{margin:0;padding:0;}
#zhezhao{
width:100%;
height:100%;
background:#f00;
filter:alpha(opacity:0);
opacity:0;
z-index:9999;
position:absolute;
top:0;
left:0;
display:none;
}
#div2{
width:200px;
height:200px;
position:relative;
background:#EEEEEE;
border:1px solid #f00;
}
#div1{
width:15px;
height:15px;
background:#99CC00;
position:absolute;
right:0px;
bottom:0px;
cursor:nw-resize;
overflow:hidden;
font-size:12px;
text-align:center;
line-height:15px;
color:#FFFFFF;
float:right;
z-index:3;
}
#right{
width:15px;
height:100%;
background:#f00;
float:right;
position:absolute;
right:0;
top:0;
cursor:e-resize;
overflow:hidden;
filter:alpha(opacity:0);
opacity:0;
z-index:1;
}
#bottom{
width:100%;
height:15px;
background:#f00;
position:absolute;
left:0;
bottom:0;
cursor:n-resize;
overflow:hidden;
filter:alpha(opacity:0);
opacity:0;
z-index:1;
}
#div2 p{
padding:10px;
line-height:24px;
font-size:13px;
text-indent:24px;
color:#996600;
}
#div2 h2{
width:100%;
height:25px;
line-height:25px;
font-size:14px;
background:#CC9900;
color:#FFFFFF;
text-indent:15px;
cursor:move;
overflow:hidden;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var zhezhao=document.getElementById("zhezhao");
var h2=oDiv2.getElementsByTagName("h2")[0];
var right=document.getElementById("right");
var bottom=document.getElementById("bottom");
var mouseStart={};
var divStart={};
var rightStart={};
var bottomStart={};
//往右拽
right.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
rightStart.x=right.offsetLeft;
if(right.setCapture)
{
right.onmousemove=doDrag1;
right.onmouseup=stopDrag1;
right.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag1,true);
document.addEventListener("mouseup",stopDrag1,true);
}
};
function doDrag1(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+rightStart.x;
var w=l+oDiv.offsetWidth;
if(w<oDiv.offsetWidth)
{
w=oDiv.offsetWidth;
}
else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
{
w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
}
oDiv2.style.width=w+"px";
};
function stopDrag1()
{
if(right.releaseCapture)
{
right.onmousemove=null;
right.onmouseup=null;
right.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag1,true);
document.removeEventListener("mouseup",stopDrag1,true);
}
};
//往下拽
bottom.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
bottomStart.y=bottom.offsetTop;
if(bottom.setCapture)
{
bottom.onmousemove=doDrag2;
bottom.onmouseup=stopDrag2;
bottom.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag2,true);
document.addEventListener("mouseup",stopDrag2,true);
}
};
function doDrag2(ev)
{
var oEvent=ev||event;
var t=oEvent.clientY-mouseStart.y+bottomStart.y;
var h=t+oDiv.offsetHeight;
if(h<oDiv.offsetHeight)
{
h=oDiv.offsetHeight;
}
else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
{
h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
}
oDiv2.style.height=h+"px";
};
function stopDrag2()
{
if(bottom.releaseCapture)
{
bottom.onmousemove=null;
bottom.onmouseup=null;
bottom.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag2,true);
document.removeEventListener("mouseup",stopDrag2,true);
}
};
//往左右同時(shí)拽
oDiv.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
divStart.x=oDiv.offsetLeft;
divStart.y=oDiv.offsetTop;
if(oDiv.setCapture)
{
oDiv.onmousemove=doDrag;
oDiv.onmouseup=stopDrag;
oDiv.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag,true);
document.addEventListener("mouseup",stopDrag,true);
}
zhezhao.style.display='block';
};
function doDrag(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+divStart.x;
var t=oEvent.clientY-mouseStart.y+divStart.y;
var w=l+oDiv.offsetWidth;
var h=t+oDiv.offsetHeight;
if(w<oDiv.offsetWidth)
{
w=oDiv.offsetWidth;
}
else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
{
w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
}
if(h<oDiv.offsetHeight)
{
h=oDiv.offsetHeight;
}
else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
{
h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
}
oDiv2.style.width=w+"px";
oDiv2.style.height=h+"px";
};
function stopDrag()
{
if(oDiv.releaseCapture)
{
oDiv.onmousemove=null;
oDiv.onmouseup=null;
oDiv.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag,true);
document.removeEventListener("mouseup",stopDrag,true);
}
zhezhao.style.display='none';
};
//h2完美拖拽
h2.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
divStart.x=oDiv2.offsetLeft;
divStart.y=oDiv2.offsetTop;
if(h2.setCapture)
{
h2.onmousemove=doDrag3;
h2.onmouseup=stopDrag3;
h2.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag3,true);
document.addEventListener("mouseup",stopDrag3,true);
}
zhezhao.style.display='block';
};
function doDrag3(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+divStart.x;
var t=oEvent.clientY-mouseStart.y+divStart.y;
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDiv2.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv2.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDiv2.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv2.offsetHeight;
}
oDiv2.style.left=l+"px";
oDiv2.style.top=t+"px";
};
function stopDrag3()
{
if(h2.releaseCapture)
{
h2.onmousemove=null;
h2.onmouseup=null;
h2.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag3,true);
document.removeEventListener("mouseup",stopDrag3,true);
}
zhezhao.style.display='none';
}
};
</script>
</head>
<body>
<div id="div2">
<div style="width:100%; height:100%; overflow:hidden;">
<h2>完美的拖拽</h2>
<p>體驗(yàn)不錯(cuò)的JavaScript網(wǎng)頁拖動(dòng)，除了拖動(dòng)，還可拖動(dòng)放大，像Windows窗口一樣被放大或縮小，只要按住層的右下角，就可以收放自如的放大或縮小。想使用的朋友，可將代碼里的Js封裝成類，從外部引入想必更合理些。'</p>
<div id="right"></div>
<div id="div1">拖</div>
<div id="bottom"></div>
</div>
</div>
<div id="zhezhao"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js實(shí)現(xiàn)層拖動(dòng)效果，還可以拖拽放大</title>
<style>
*{margin:0;padding:0;}
#zhezhao{
width:100%;
height:100%;
background:#f00;
filter:alpha(opacity:0);
opacity:0;
z-index:9999;
position:absolute;
top:0;
left:0;
display:none;
}
#div2{
width:200px;
height:200px;
position:relative;
background:#EEEEEE;
border:1px solid #f00;
}
#div1{
width:15px;
height:15px;
background:#99CC00;
position:absolute;
right:0px;
bottom:0px;
cursor:nw-resize;
overflow:hidden;
font-size:12px;
text-align:center;
line-height:15px;
color:#FFFFFF;
float:right;
z-index:3;
}
#right{
width:15px;
height:100%;
background:#f00;
float:right;
position:absolute;
right:0;
top:0;
cursor:e-resize;
overflow:hidden;
filter:alpha(opacity:0);
opacity:0;
z-index:1;
}
#bottom{
width:100%;
height:15px;
background:#f00;
position:absolute;
left:0;
bottom:0;
cursor:n-resize;
overflow:hidden;
filter:alpha(opacity:0);
opacity:0;
z-index:1;
}
#div2 p{
padding:10px;
line-height:24px;
font-size:13px;
text-indent:24px;
color:#996600;
}
#div2 h2{
width:100%;
height:25px;
line-height:25px;
font-size:14px;
background:#CC9900;
color:#FFFFFF;
text-indent:15px;
cursor:move;
overflow:hidden;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var zhezhao=document.getElementById("zhezhao");
var h2=oDiv2.getElementsByTagName("h2")[0];
var right=document.getElementById("right");
var bottom=document.getElementById("bottom");
var mouseStart={};
var divStart={};
var rightStart={};
var bottomStart={};
//往右拽
right.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
rightStart.x=right.offsetLeft;
if(right.setCapture)
{
right.onmousemove=doDrag1;
right.onmouseup=stopDrag1;
right.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag1,true);
document.addEventListener("mouseup",stopDrag1,true);
}
};
function doDrag1(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+rightStart.x;
var w=l+oDiv.offsetWidth;
if(w<oDiv.offsetWidth)
{
w=oDiv.offsetWidth;
}
else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
{
w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
}
oDiv2.style.width=w+"px";
};
function stopDrag1()
{
if(right.releaseCapture)
{
right.onmousemove=null;
right.onmouseup=null;
right.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag1,true);
document.removeEventListener("mouseup",stopDrag1,true);
}
};
//往下拽
bottom.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
bottomStart.y=bottom.offsetTop;
if(bottom.setCapture)
{
bottom.onmousemove=doDrag2;
bottom.onmouseup=stopDrag2;
bottom.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag2,true);
document.addEventListener("mouseup",stopDrag2,true);
}
};
function doDrag2(ev)
{
var oEvent=ev||event;
var t=oEvent.clientY-mouseStart.y+bottomStart.y;
var h=t+oDiv.offsetHeight;
if(h<oDiv.offsetHeight)
{
h=oDiv.offsetHeight;
}
else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
{
h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
}
oDiv2.style.height=h+"px";
};
function stopDrag2()
{
if(bottom.releaseCapture)
{
bottom.onmousemove=null;
bottom.onmouseup=null;
bottom.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag2,true);
document.removeEventListener("mouseup",stopDrag2,true);
}
};
//往左右同時(shí)拽
oDiv.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
divStart.x=oDiv.offsetLeft;
divStart.y=oDiv.offsetTop;
if(oDiv.setCapture)
{
oDiv.onmousemove=doDrag;
oDiv.onmouseup=stopDrag;
oDiv.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag,true);
document.addEventListener("mouseup",stopDrag,true);
}
zhezhao.style.display='block';
};
function doDrag(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+divStart.x;
var t=oEvent.clientY-mouseStart.y+divStart.y;
var w=l+oDiv.offsetWidth;
var h=t+oDiv.offsetHeight;
if(w<oDiv.offsetWidth)
{
w=oDiv.offsetWidth;
}
else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
{
w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
}
if(h<oDiv.offsetHeight)
{
h=oDiv.offsetHeight;
}
else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
{
h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
}
oDiv2.style.width=w+"px";
oDiv2.style.height=h+"px";
};
function stopDrag()
{
if(oDiv.releaseCapture)
{
oDiv.onmousemove=null;
oDiv.onmouseup=null;
oDiv.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag,true);
document.removeEventListener("mouseup",stopDrag,true);
}
zhezhao.style.display='none';
};
//h2完美拖拽
h2.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
divStart.x=oDiv2.offsetLeft;
divStart.y=oDiv2.offsetTop;
if(h2.setCapture)
{
h2.onmousemove=doDrag3;
h2.onmouseup=stopDrag3;
h2.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag3,true);
document.addEventListener("mouseup",stopDrag3,true);
}
zhezhao.style.display='block';
};
function doDrag3(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+divStart.x;
var t=oEvent.clientY-mouseStart.y+divStart.y;
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDiv2.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv2.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDiv2.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv2.offsetHeight;
}
oDiv2.style.left=l+"px";
oDiv2.style.top=t+"px";
};
function stopDrag3()
{
if(h2.releaseCapture)
{
h2.onmousemove=null;
h2.onmouseup=null;
h2.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag3,true);
document.removeEventListener("mouseup",stopDrag3,true);
}
zhezhao.style.display='none';
}
};
</script>
</head>
<body>
<div id="div2">
<div style="width:100%; height:100%; overflow:hidden;">
<h2>完美的拖拽</h2>
<p>體驗(yàn)不錯(cuò)的JavaScript網(wǎng)頁拖動(dòng)，除了拖動(dòng)，還可拖動(dòng)放大，像Windows窗口一樣被放大或縮小，只要按住層的右下角，就可以收放自如的放大或縮小。想使用的朋友，可將代碼里的Js封裝成類，從外部引入想必更合理些。'</p>
<div id="right"></div>
<div id="div1">拖</div>
<div id="bottom"></div>
</div>
</div>
<div id="zhezhao"></div>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS實(shí)現(xiàn)超簡單的鼠標(biāo)拖動(dòng)效果
- JS響應(yīng)鼠標(biāo)點(diǎn)擊實(shí)現(xiàn)兩個(gè)滑塊區(qū)間拖動(dòng)效果
- JS實(shí)現(xiàn)左右拖動(dòng)改變內(nèi)容顯示區(qū)域大小的方法
- js實(shí)現(xiàn)div拖動(dòng)動(dòng)畫運(yùn)行軌跡效果代碼分享
- avalon js實(shí)現(xiàn)仿微博拖動(dòng)圖片排序
- JS實(shí)現(xiàn)彈出浮動(dòng)窗口(支持鼠標(biāo)拖動(dòng)和關(guān)閉)實(shí)例詳解
- JS實(shí)現(xiàn)動(dòng)態(tài)移動(dòng)層及拖動(dòng)浮層關(guān)閉的方法
- JS實(shí)現(xiàn)可縮放、拖動(dòng)、關(guān)閉和最小化的浮動(dòng)窗口完整實(shí)例
- js用拖動(dòng)滑塊來控制圖片大小的方法
- JS+CSS實(shí)現(xiàn)可拖動(dòng)的彈出提示框
- js實(shí)現(xiàn)圖片拖動(dòng)改變順序附圖
- JS實(shí)現(xiàn)的自定義網(wǎng)頁拖動(dòng)類
相關(guān)文章
JS數(shù)組reduce你不得不知道的25個(gè)高級(jí)用法
reduce作為ES5新增的常規(guī)數(shù)組方法之一,對比forEach 、filter和map,在實(shí)際使用上好像有些被忽略，下面這篇文章主要給大家介紹了關(guān)于JS數(shù)組reduce你不得不知道的25個(gè)高級(jí)用法，需要的朋友可以參考下2021-06-06
這篇文章主要介紹了JavaScript命令模式原理與用法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript命令模式基本概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
js點(diǎn)擊時(shí)關(guān)閉該范圍下拉菜單之外的菜單方法
下面小編就為大家分享一篇js點(diǎn)擊時(shí)關(guān)閉該范圍下拉菜單之外的菜單方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
淺析JavaScript中的變量復(fù)制、參數(shù)傳遞和作用域鏈
這篇文章主要介紹了淺析JavaScript中的變量復(fù)制、參數(shù)傳遞和作用域鏈 的相關(guān)資料,需要的朋友可以參考下2016-01-01
JS如何實(shí)現(xiàn)form表單登錄驗(yàn)證并使用MD5加密詳解
表單驗(yàn)證為終端用戶檢測無效的數(shù)據(jù)并標(biāo)記這些錯(cuò)誤,是一種用戶體驗(yàn)的優(yōu)化,下面這篇文章主要給大家介紹了關(guān)于JS如何實(shí)現(xiàn)form表單登錄驗(yàn)證并使用MD5加密的相關(guān)資料,需要的朋友可以參考下2023-06-06
滾動(dòng)條高度如何獲取，方法有很多，在本文將為大家詳細(xì)介紹下如何使用js做到，下面有個(gè)不錯(cuò)的示例，感興趣的朋友不要錯(cuò)過2013-10-10
下面小編就為大家分享一篇總結(jié)js中的一些兼容性易錯(cuò)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
微信小程序web-view環(huán)境下H5跳轉(zhuǎn)小程序頁面方法實(shí)例代碼
微信小程序是一種全新的連接用戶與服務(wù)的方式,它可以在微信內(nèi)被便捷地獲取和傳播,同時(shí)具有出色的使用體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于微信小程序web-view環(huán)境下H5跳轉(zhuǎn)小程序頁面方法的相關(guān)資料,需要的朋友可以參考下2022-08-08
js中判斷一個(gè)數(shù)是不是素?cái)?shù)的三種方法例子
這篇文章主要給大家介紹了關(guān)于js中如何判斷一個(gè)數(shù)是不是素?cái)?shù)的三種方法,素?cái)?shù)(只能被1和本身整除的數(shù))規(guī)律:把這個(gè)數(shù)除以它之前的每一個(gè)數(shù)(從2開始)只要找到一個(gè)整除(余數(shù)為0)就是非素?cái)?shù),需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了JS對HTML表格進(jìn)行增刪改操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08