JS Drag-On Effect วิธีการใช้งานสำหรับการลากและขยายการลากเลเยอร์

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-06-02 01:16:01

บทความนี้อธิบายถึงวิธีการใช้งานของ JS Drag-On และเอฟเฟกต์การลากเลเยอร์แบบขยาย แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:

คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

<head>

<title> JS ตระหนักถึงเอฟเฟกต์การลากเลเยอร์และยังสามารถลากและซูมเข้า </title>

<style>

*{margin: 0; padding: 0;}

#zhezhao {

ความกว้าง: 100%;

ความสูง: 100%;

ความเป็นมา:#f00;

ตัวกรอง: อัลฟ่า (ความทึบ: 0);

ความทึบ: 0;

z-index: 9999;

ตำแหน่ง: สัมบูรณ์;

ด้านบน: 0;

ซ้าย: 0;

แสดง: ไม่มี;

#div2 {

ความกว้าง: 200px;

ความสูง: 200px;

ตำแหน่ง: ญาติ;

ความเป็นมา: #eeeeee;

ชายแดน: 1px Solid #F00;

#div1 {

ความกว้าง: 15px;

ความสูง: 15px;

ความเป็นมา:#99cc00;

ตำแหน่ง: สัมบูรณ์;

ขวา: 0px;

ด้านล่าง: 0px;

เคอร์เซอร์: NW-Resize;

ล้น: ซ่อน;

ขนาดตัวอักษร: 12px;

TEXT-ALIGN: CENTER;

ความสูงของสาย: 15px;

สี: #ffffff;

ลอย: ขวา;

z-index: 3;

#ขวา{

ความกว้าง: 15px;

ความสูง: 100%;

ความเป็นมา:#f00;

ลอย: ขวา;

ตำแหน่ง: สัมบูรณ์;

ขวา: 0;

ด้านบน: 0;

เคอร์เซอร์: อิเล็กทรอนิกส์;

ล้น: ซ่อน;

ตัวกรอง: อัลฟ่า (ความทึบ: 0);

ความทึบ: 0;

z-index: 1;

#ด้านล่าง{

ความกว้าง: 100%;

ความสูง: 15px;

ความเป็นมา:#f00;

ตำแหน่ง: สัมบูรณ์;

ซ้าย: 0;

ด้านล่าง: 0;

เคอร์เซอร์: N-Resize;

ล้น: ซ่อน;

ตัวกรอง: อัลฟ่า (ความทึบ: 0);

ความทึบ: 0;

z-index: 1;

#div2 p {

Padding: 10px;

ความสูงของสาย: 24px;

ขนาดตัวอักษร: 13px;

Indent-Indent: 24px;

สี:#996600;

#div2 h2 {

ความกว้าง: 100%;

ความสูง: 25px;

ความสูงของสาย: 25px;

ขนาดตัวอักษร: 14px;

ความเป็นมา:#CC9900;

สี: #ffffff;

Indent-Indent: 15px;

เคอร์เซอร์: ย้าย;

ล้น: ซ่อน;

</style>

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 = 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-Onesestart.x+rightStart.x;

var w = l+odiv.offsetWidth;

if (w <odiv.offsetWidth)

w = odiv.offsetWidth;

อื่นถ้า (w> document.documentelement.clientWidth-odiv2.offsetleft)

w = document.documentElement.ClientWidth-odiv2.offsetLeft-2;

odiv2.style.width = w+"px";

ฟังก์ชั่น stopdrag1 ()

ถ้า (ขวา. releasecapture)

Right.onmousemove = null;

Right.onMouseUp = null;

ขวา 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)

BOTTOR.OnMouSemove = DODRAG2;

bottom.onMouseup = stopDrag2;

ด้านล่าง setCapture ();

อื่น

document.addeventListener ("Mousemove", dodrag2, true);

document.addeventListener ("Mouseup", stopDrag2, true);

ฟังก์ชั่น dodrag2 (ev)

var oEvent = ev || เหตุการณ์;

var t = oEvent.clienty--mousestart.y+bottomstart.y;

var h = t+odiv.offSetheight;

ถ้า (h <odiv.offsetheight)

h = odiv.offSetheight;

อื่นถ้า (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;

BOTTOR.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 = 'block';

ฟังก์ชั่น dodrag (ev)

var oEvent = ev || เหตุการณ์;

var l = oeVent.Clientx-Onesestart.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;

อื่นถ้า (w> document.documentelement.clientWidth-odiv2.offsetleft)

w = document.documentElement.ClientWidth-odiv2.offsetLeft-2;

ถ้า (h <odiv.offsetheight)

h = odiv.offSetheight;

อื่นถ้า (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 = 'ไม่มี';

// 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 = 'block';

ฟังก์ชั่น dodrag3 (ev)

var oEvent = ev || เหตุการณ์;

var l = oeVent.Clientx-Onesestart.x+divStart.x;

var t = oEvent.clienty--mousestart.y+divstart.y;

ถ้า (l <0)

l = 0;

อื่นถ้า (l> document.documentelement.clientWidth-odiv2.offsetWidth)

l = document.documentElement.ClientWidth-odiv2.offsetWidth;

ถ้า (t <0)

t = 0;

อื่นถ้า (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 = 'ไม่มี';

</script>

</head>

<body>

<div>

<H2> การลากที่สมบูรณ์แบบ </h2>

<p> สัมผัสกับการลากหน้าเว็บ JavaScript ที่ดี นอกเหนือจากการลากแล้วคุณยังสามารถลากและขยายและขยายและขยายหรือลดลงเช่นหน้าต่างหน้าต่าง เพียงกดค้างไว้ที่มุมขวาล่างของเลเยอร์เพื่อซูมเข้าหรือออกได้อย่างง่ายดาย เพื่อนที่ต้องการใช้มันสามารถห่อหุ้ม JS ในรหัสลงในชั้นเรียนและอาจมีเหตุผลมากกว่าที่จะแนะนำจากภายนอก '</p>

</div>

</body>

</html>

ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน