この記事では、JSドラッグオンと増幅層のドラッグ効果の実装方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします。<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<Title> jsはレイヤードラッグ効果を実現し、ドラッグしてズームインすることもできます</title>
<style>
*{マージン：0;パディング：0;}
#zhezhao {
幅：100％;
高さ：100％;
背景：＃f00;
フィルター：アルファ（不透明：0）;
不透明：0;
Z-Index：9999;
位置：絶対;
上：0;
左：0;
表示：なし;
}
＃div2 {
幅：200px;
高さ：200px;
位置：相対;
背景：#eeeeee;
ボーダー：1PXソリッド＃F00;
}
＃div1 {
幅：15px;
高さ：15px;
背景：＃99cc00;
位置：絶対;
右：0px;
下：0px;
カーソル：nw-resize;
オーバーフロー：隠し;
フォントサイズ：12px;
テキストアライグ：センター;
ラインハイト：15px;
色：#ffffff;
フロート：そうです;
z-index：3;
}
＃右{
幅：15px;
高さ：100％;
背景：＃f00;
フロート：そうです;
位置：絶対;
右：0;
上：0;
カーソル：e-resize;
オーバーフロー：隠し;
フィルター：アルファ（不透明：0）;
不透明：0;
z-index：1;
}
＃底{
幅：100％;
高さ：15px;
背景：＃f00;
位置：絶対;
左：0;
下：0;
カーソル：n resize;
オーバーフロー：隠し;
フィルター：アルファ（不透明：0）;
不透明：0;
z-index：1;
}
＃div2p {
パディング：10px;
ラインハイト：24px;
フォントサイズ：13px;
テキストインデント：24px;
色：＃996600;
}
＃div2 H2 {
幅：100％;
高さ：25px;
ラインハイト：25px;
フォントサイズ：14px;
背景：＃cc9900;
色：#ffffff;
テキストインデント：15px;
カーソル：移動;
オーバーフロー：隠し;
}
</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（）;
}
それ以外
{
document.addeventlistener（ "mousemove"、dodrag1、true）;
document.addeventlistener（ "mouseup"、stopdrag1、true）;
}
};
関数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";
};
関数stopdrag1（）
{
if（right.releasecapture）
{
right.onmousemove = null;
right.onmouseup = null;
right.releasecapture（）;
}
それ以外
{
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（）;
}
それ以外
{
document.addeventlistener（ "mousemove"、dodrag2、true）;
document.addeventlistener（ "mouseup"、stopdrag2、true）;
}
};
関数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";
};
関数stopdrag2（）
{
if（bottom.releasecapture）
{
bottom.onmousemove = null;
bottom.onmouseup = null;
bottom.releasecapture（）;
}
それ以外
{
document.removeeventlistener（ "mousemove"、dodrag2、true）;
document.RemoveEventListener（ "MouseUp"、stopdrag2、true）;
}
};
//同時に左右にパルス
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（）;
}
それ以外
{
document.addeventlistener（ "mousemove"、dodrag、true）;
document.addeventlistener（ "mouseup"、stopdrag、true）;
}
Zhezhao.style.display = 'block';
};
関数ドッドラグ（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（）;
}
それ以外
{
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（）;
}
それ以外
{
document.addeventlistener（ "mousemove"、dodrag3、true）;
document.addeventlistener（ "mouseup"、stopdrag3、true）;
}
Zhezhao.style.display = 'block';
};
関数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";
};
関数stopdrag3（）
{
if（h2.releasecapture）
{
h2.onmousemove = null;
h2.onmouseup = null;
h2.releasecapture（）;
}
それ以外
{
document.removeeventlistener（ "mousemove"、dodrag3、true）;
document.RemoveEventListener（ "MouseUp"、stopdrag3、true）;
}
Zhezhao.style.display = 'none';
}
};
</script>
</head>
<body>
<div id = "div2">
<div>
<h2>完全なドラッグ</h2>
<p>良いJavaScriptのWebページのドラッグを体験してください。ドラッグに加えて、ドラッグして拡大することもできます。これは、ウィンドウウィンドウのように拡大または縮小されます。レイヤーの右下隅を押し続けて、簡単にズームインまたはアウトします。使用したい場合は、コードのJSをクラスにカプセル化できます。外部から紹介する方がおそらくより合理的です。 '</p>
<div id = "right"> </div>
<div id = "div1"> drag </div>
<div id = "bottom"> </div>
</div>
</div>
<div id = "zhezhao"> </div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。