이 기사에서는 JS 드래그 온 및 증폭 된 레이어 드래그 효과의 구현 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = gb2312" />
<title> js는 레이어 드래그 효과를 깨닫고 </title>을 끌고 확대 할 수 있습니다.
<스타일>
*{마진 : 0; 패딩 : 0;}
#zhezhao {
너비 : 100%;
높이 : 100%;
배경 :#F00;
필터 : 알파 (불투명도 : 0);
불투명도 : 0;
Z- 인덱스 : 9999;
위치 : 절대;
상단 : 0;
왼쪽 : 0;
디스플레이 : 없음;
}
#div2 {
너비 : 200px;
높이 : 200px;
위치 : 상대;
배경 : #eeeeee;
테두리 : 1px 고체 #f00;
}
#div1 {
너비 : 15px;
높이 : 15px;
배경 :#99CC00;
위치 : 절대;
오른쪽 : 0px;
하단 : 0px;
커서 : NW- 레즈 크기;
오버플로 : 숨겨진;
글꼴 크기 : 12px;
텍스트 정렬 : 센터;
라인 높이 : 15px;
색상 : #ffffff;
플로트 : 오른쪽;
Z- 인덱스 : 3;
}
#오른쪽{
너비 : 15px;
높이 : 100%;
배경 :#F00;
플로트 : 오른쪽;
위치 : 절대;
오른쪽 : 0;
상단 : 0;
커서 : e- 레지 크기;
오버플로 : 숨겨진;
필터 : 알파 (불투명도 : 0);
불투명도 : 0;
z- 인덱스 : 1;
}
#맨 아래{
너비 : 100%;
높이 : 15px;
배경 :#F00;
위치 : 절대;
왼쪽 : 0;
하단 : 0;
커서 : N- 레드 크기;
오버플로 : 숨겨진;
필터 : 알파 (불투명도 : 0);
불투명도 : 0;
z- 인덱스 : 1;
}
#div2 p {
패딩 : 10px;
라인 높이 : 24px;
글꼴 크기 : 13px;
텍스트 안정 : 24px;
색상 :#996600;
}
#div2 H2 {
너비 : 100%;
높이 : 25px;
라인 높이 : 25px;
글꼴 크기 : 14px;
배경 :#CC9900;
색상 : #ffffff;
텍스트 안정 : 15px;
커서 : 이동;
오버플로 : 숨겨진;
}
</스타일>
<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 ( "오른쪽");
var bottom = document.getElementById ( "하단");
var mousestart = {};
var divstart = {};
var rightstart = {};
var bottomstart = {};
// 오른쪽을 당기십시오
Right.onmousedown = 함수 (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 ( "마우스 업", stopdrag1, true);
}
};
기능 dodrag1 (EV)
{
var oevent = ev || 이벤트;
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.right.releasecapture)
{
right.onmousemove = null;
오른쪽 .ONMOUSEUP = NULL;
right.releasecapture ();
}
또 다른
{
document.removeEventListener ( "MousEmove", dodrag1, true);
document.removeeventListener ( "마우스 업", stopdrag1, true);
}
};
// 당기십시오
altogn.onmousedown = function (ev)
{
var oevent = ev || 이벤트;
mousestart.x = oevent.clientx;
mousestart.y = oevent.clienty;
하단 스타트 .y = 맨 아래 .OffSetTop;
if (bottom.setcapture)
{
Bottom.onmouseMove = dodrag2;
Bottom.onMouseUp = STOPDRAG2;
맨 아래 .setCapture ();
}
또 다른
{
document.addeventListener ( "MouseMove", dodrag2, true);
document.addeventListener ( "마우스 업", stopdrag2, true);
}
};
기능 dodrag2 (EV)
{
var oevent = ev || 이벤트;
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 (하단. Releasecapture)
{
Bottom.onmouseMove = null;
bottom.onmouseup = null;
Bottom.ReleaseCapture ();
}
또 다른
{
document.removeeventListener ( "MouseMove", dodrag2, true);
document.removeeventListener ( "마우스 업", 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 ( "마우스 업", stopdrag, true);
}
zhezhao.style.display = 'block';
};
기능 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 <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";
};
함수 stopdrag ()
{
if (odiv.releasecapture)
{
odiv.onmousemove = null;
odiv.onmouseup = null;
odiv.releasecapture ();
}
또 다른
{
document.removeEventListener ( "MousEmove", dodrag, true);
document.removeEventListener ( "마우스 업", stopdrag, true);
}
zhezhao.style.display = 'none';
};
// H2 완벽한 드래그
h2.onmousedown = 함수 (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 ( "마우스 업", stopdrag3, true);
}
zhezhao.style.display = 'block';
};
기능 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 ( "마우스 업", stopdrag3, true);
}
zhezhao.style.display = 'none';
}
};
</스크립트>
</head>
<body>
<div id = "div2">
<div>
<H2> 완벽한 드래그 </h2>
<p> 좋은 JavaScript 웹 페이지 드래그를 경험하십시오. 드래그하는 것 외에도 드래그 및 확대 할 수 있으며 Windows 창처럼 확대되거나 줄어 듭니다. 레이어의 오른쪽 하단 모서리를 누르고 쉽게 확대하거나 축소하십시오. 그것을 사용하려는 친구들은 코드의 JS를 수업에 캡슐화 할 수 있으며 외부에서 소개하는 것이 더 합리적 일 것입니다. '</p>
<div id = "오른쪽"> </div>
<div id = "div1"> 드래그 </div>
<div id = "하단"> </div>
</div>
</div>
<div id = "Zhezhao"> </div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.