この記事の例では、JSでドラッグして拡大できるレイヤードラッグエフェクトの実装方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
<頭>
Js实现层拖動效果，拖拽放大
<スタイル>
*{マージン: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;
オーバーフロー:非表示;
font-size:12px;
text-align:center;
行の高さ:15px;
色:#FFFFFF;
float:right;
z-index:3;
}
#そうです{
幅:15px;
高さ:100%;
背景:#f00;
float:right;
位置:絶対;
右:0;
トップ:0;
カーソル:e-サイズ変更;
オーバーフロー:非表示;
フィルター:アルファ(不透明度:0);
不透明度:0;
z-index:1;
}
#bottom{
幅:100%;
高さ:15px;
背景:#f00;
位置:絶対;
左:0;
下:0;
カーソル:n-resize;
オーバーフロー:非表示;
フィルター:アルファ(不透明度:0);
不透明度:0;
z-index:1;
}
#div2 p{
パディング:10px;
行の高さ:24px;
フォントサイズ:13px;
text-indent:24px;
色:#996600;
}
#div2 h2{
幅:100%;
高さ:25px;
行の高さ:25px;
フォントサイズ:14px;
背景:#CC9900;
色:#FFFFFF;
text-indent:15px;
カーソル:移動;
オーバーフロー:非表示;
}
<スクリプトタイプ="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");
varbottom=document.getElementById("bottom");
varmouseStart={};
var divStart={};
var rightStart={};
varbottomStart={};
//往右拽
right.onmousedown=function(ev)
{
var oEvent=ev||イベント;
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||イベント;
var l=oEvent.clientX-mouseStart.x rightStart.x;
var w=l oDiv.offsetWidth;
if(w
{
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||イベント;
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||イベント;
var t=oEvent.clientY-mouseStart.ybottomStart.y;
var h=t oDiv.offsetHeight;
if(h
{
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||イベント;
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='ブロック';
};
関数 doDrag(ev)
{
var oEvent=ev||イベント;
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
{
w=oDiv.offsetWidth;
}
else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
{
w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
}
if(h
{
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";
};
関数 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||イベント;
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='ブロック';
};
関数 doDrag3(ev)
{
var oEvent=ev||イベント;
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';
}
};
パーフェクトドラッグ
JavaScript Web ページのドラッグを体験してください。ドラッグするだけでなく、ドラッグして拡大することもできます。Windows ウィンドウのように、レイヤーの右下隅を押し続けるだけで拡大または縮小できます。自由に外へ。それを使用したい友人は、コード内の J をクラスにカプセル化することができます。外部から導入する方が合理的です。 '
ドラッグ
