Artikel ini menjelaskan metode implementasi JS Drag-On dan Efek Drag Layer yang diamplifikasi. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten-tipe" content = "text /html; charset = gb2312" />
<title> JS mewujudkan efek seret layer, dan juga dapat menyeret dan memperbesar </ title>
<tyle>
*{margin: 0; padding: 0;}
#zhezhao {
Lebar: 100%;
Tinggi: 100%;
Latar Belakang:#F00;
filter: alpha (opacity: 0);
Opacity: 0;
z-index: 9999;
Posisi: Absolute;
TOP: 0;
Kiri: 0;
Tampilan: Tidak Ada;
}
#Div2 {
Lebar: 200px;
Tinggi: 200px;
Posisi: kerabat;
Latar belakang: #eeeeee;
Perbatasan: 1px solid #f00;
}
#Div1 {
Lebar: 15px;
Tinggi: 15px;
Latar Belakang:#99cc00;
Posisi: Absolute;
Kanan: 0px;
Bawah: 0px;
Kursor: NW-Ressize;
meluap: tersembunyi;
font-size: 12px;
Teks-Align: tengah;
Line-Height: 15px;
Warna: #FFFFFF;
float: benar;
z-index: 3;
}
#Kanan{
Lebar: 15px;
Tinggi: 100%;
Latar Belakang:#F00;
float: benar;
Posisi: Absolute;
Kanan: 0;
TOP: 0;
Kursor: E-Ressize;
meluap: tersembunyi;
filter: alpha (opacity: 0);
Opacity: 0;
z-index: 1;
}
#dasar{
Lebar: 100%;
Tinggi: 15px;
Latar Belakang:#F00;
Posisi: Absolute;
Kiri: 0;
Bawah: 0;
Kursor: N-resize;
meluap: tersembunyi;
filter: alpha (opacity: 0);
Opacity: 0;
z-index: 1;
}
#Div2 p {
padding: 10px;
Line-Height: 24px;
font-size: 13px;
Text-Indent: 24px;
Warna:#996600;
}
#Div2 H2 {
Lebar: 100%;
Tinggi: 25px;
Line-Height: 25px;
Ukuran font: 14px;
Latar Belakang:#CC9900;
Warna: #FFFFFF;
Text-Indent: 15px;
Kursor: Pindah;
meluap: tersembunyi;
}
</tyle>
<type skrip = "Teks/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 ("kanan");
var bottom = document.getElementById ("Bottom");
var mousestart = {};
var divStart = {};
var rightStart = {};
var bottomStart = {};
// Tarik ke kanan
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 ();
}
kalau tidak
{
document.addeventlistener ("mousemove", dodrag1, true);
document.addeventlistener ("mouseup", stopdrag1, true);
}
};
Fungsi 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;
}
lain jika (w> document.documentelement.clientwidth-odiv2.offsetleft)
{
w = document.documentelement.clientwidth-odiv2.offsetleft-2;
}
odiv2.style.width = w+"px";
};
fungsi stopdrag1 ()
{
if (right.releasecapture)
{
right.onmouseMove = null;
right.onmouseUp = null;
right.releasecapture ();
}
kalau tidak
{
document.removeeventlistener ("mousemove", dodrag1, true);
document.removeeventlistener ("mouseup", stopdrag1, true);
}
};
//Menurunkan
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 ();
}
kalau tidak
{
document.addeventlistener ("mousemove", dodrag2, true);
document.addeventlistener ("mouseup", stopdrag2, true);
}
};
Fungsi 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;
}
lain jika (h> document.documentelement.clientheight-odiv2.offsettop)
{
h = document.documentElement.clientHeight-odiv2.offsettop-2;
}
odiv2.style.height = h+"px";
};
fungsi stopdrag2 ()
{
if (bottom.releasecapture)
{
Bottom.onmouseMove = null;
Bottom.onmouseUp = null;
Bottom.releasecapture ();
}
kalau tidak
{
document.removeeventlistener ("mousemove", dodrag2, true);
document.removeeventlistener ("mouseup", stopdrag2, true);
}
};
// pulsa ke kiri dan kanan pada saat yang sama
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 ();
}
kalau tidak
{
document.addeventlistener ("mousemove", dodrag, true);
document.addeventlistener ("mouseup", stopdrag, true);
}
zhezhao.style.display = 'block';
};
Fungsi 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;
}
lain jika (w> document.documentelement.clientwidth-odiv2.offsetleft)
{
w = document.documentelement.clientwidth-odiv2.offsetleft-2;
}
if (h <odiv.offsetHeight)
{
h = odiv.offsetheight;
}
lain jika (h> document.documentelement.clientheight-odiv2.offsettop)
{
h = document.documentElement.clientHeight-odiv2.offsettop-2;
}
odiv2.style.width = w+"px";
odiv2.style.height = h+"px";
};
fungsi stopdrag ()
{
if (odiv.releasecapture)
{
odiv.onmouseMove = null;
odiv.onmouseUp = null;
odiv.releasecapture ();
}
kalau tidak
{
document.removeeventlistener ("mousemove", dodrag, true);
document.removeeventlistener ("mouseup", stopdrag, true);
}
zhezhao.style.display = 'tidak ada';
};
// h2 drag sempurna
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 ();
}
kalau tidak
{
document.addeventlistener ("mousemove", dodrag3, true);
document.addeventlistener ("mouseup", stopdrag3, true);
}
zhezhao.style.display = 'block';
};
Fungsi 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;
}
lain jika (l> document.documentelement.clientwidth-odiv2.offsetwidth)
{
l = document.documentelement.clientwidth-odiv2.offsetwidth;
}
if (t <0)
{
t = 0;
}
lain jika (t> document.documentelement.clientheight-odiv2.offsetheight)
{
t = document.documentElement.clientHeight-odiv2.offsetheight;
}
odiv2.style.left = l+"px";
odiv2.style.top = t+"px";
};
fungsi stopdrag3 ()
{
if (h2.releasecapture)
{
h2.onmouseMove = null;
h2.onmouseup = null;
h2.releasecapture ();
}
kalau tidak
{
document.removeeventlistener ("mousemove", dodrag3, true);
document.removeeventlistener ("mouseup", stopdrag3, true);
}
zhezhao.style.display = 'tidak ada';
}
};
</script>
</head>
<body>
<Div id = "Div2">
<div>
<h2> drag sempurna </h2>
<p> Rasakan Halaman Web JavaScript yang bagus. Selain menyeret, Anda juga dapat menyeret dan memperbesar, dan diperbesar atau dikurangi seperti jendela Windows. Cukup tekan dan tahan sudut kanan bawah lapisan untuk memperbesar atau keluar dengan mudah. Teman -teman yang ingin menggunakannya dapat merangkum JS dalam kode ke dalam kelas, dan mungkin lebih masuk akal untuk memperkenalkannya dari luar. '</p>
<Div ID = "Right"> </Div>
<Div ID = "Div1"> Seret </div>
<Div ID = "Bottom"> </Div>
</div>
</div>
<Div ID = "Zhezhao"> </div>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.