Artikel ini menjelaskan metode JS+CSS untuk mengimplementasikan lapisan pop-up Efek Khusus Drag-and-Drop yang indah. Bagikan untuk referensi Anda. Dengan rincian sebagai berikut:
Salinan kode adalah 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 = utf-8" />
<judul> Lapisan pop dengan efek sudut bulat yang indah diimplementasikan oleh JS+CSS </iteme>
<tyle>
tubuh{
margin: 0px;
padding: 0px;
Ukuran font: 14px;
}
#T {
Posisi: Absolute;
float: kiri;
Kiri: 0px;
Atas: 0px;
}
#A {
float: kiri;
}
.al {
Opacity: 0,80;
Filter: progid: dximagetransform.microsoft.alpha (style = 0, opacity = 80, finishopacity = 100);
}
.al2 {
Opacity: 0,00;
filter: progid: dximagetransform.microsoft.alpha (style = 0, opacity = 0, finishopacity = 100);
}
U {
Tampilan: Blok;
Meluap: tersembunyi;
Tinggi: 1px
}
U.f1 {
Latar Belakang-Color:#5cc;
Latar Belakang: #5cc;
Margin: 0px 3px
}
U.f2 {
Latar Belakang-Color:#5cc;
Border-Right: #5cc 2px padat;
Margin: 0px 1px;
Border-left: #5cc 2px padat
}
U.f3 {
Latar Belakang-Color:#5cc;
Border-Right: #5cc 1px padat;
Margin: 0px 1px;
Border-left: #5cc 1px padat
}
.d_top {
jelas: keduanya;
meluap: tersembunyi;
Latar Belakang-Color:#5cc;
Tinggi: 29px;
Vertikal-Align: Bawah;
}
.d_top a {
float: benar;
margin-top: 5px;
margin-kanan: 13px;
Padding-top: 3px;
Lebar: 18px;
Warna: Merah;
Latar Belakang-Color:#789;
Dekorasi Teks: Tidak Ada;
font-weight: tebal;
Teks-Align: tengah;
Vertikal-Align: tengah;
}
.d_top span {
float: kiri;
font-size: 13px;
margin-kiri: 15px;
margin-top: 8px;
}
.d_body {
Border-Right: #5cc 3px padat;
Border-left: #5cc 3px padat;
padding: 10px;
Tinggi: 200px;
Latar Belakang-Color: #FFFF;
}
.d_foot {
jelas: keduanya;
meluap: tersembunyi;
Latar Belakang-Color:#5cc;
Tinggi: 2px;
}
</tyle>
<type skrip = "Teks/JavaScript">
fungsi $ (id) {return document.getElementById (id);}
function show (id) {
var t = $ (id);
t.style.width = document.body.clientwidth;
t.style.height = document.body.clientHeight;
window.onresize = function () {
t.style.width = document.body.clientwidth;
t.style.height = document.body.clientHeight;
}
$ (id) .style.display = "";
}
fungsi cl (id) {
$ (id) .style.display = "none";
}
function moveEvent (e, id) {
var isie = (document.all)? true: false;
seret = true;
xx = ISIE? Event.x: E.Pagex;
yy = isie? event.y: e.pagey;
L = document.getElementById (id) .offsetleft;
T = document.getElementById (id) .offsettop;
document.onmouseMove = function (e) {
if (seret) {
x = isie? Event.x: E.Pagex; if (x <0) x = 0;
y = isie? Event.y: E.pagey; if (y <0) y = 0;
document.geteLementById (id) .style.left = l-xx+x;
document.geteLementById (id) .style.top = t-yy+y;
}
}
document.onmouseup = function () {
seret = false;
}
}
window.onscroll = function () {
$ ("back_div"). style.width = document.body.scrollwidth;
$ ("back_div"). style.height = document.body.scrollheight;
}
</script>
</head>
<body>
<Div id = "a" style = "posisi: absolute; kiri: 300px; atas: 200px;">
<a href = "javascript:" ontClick = "show ('t')"> klik di sini untuk memunculkan div dengan efek sudut bulat </a> <a href = '// www.vevb.com/' target = '_ blank'> <u> kotak dialog </u> </a>! </div>
<div id = "t" style = "display: none;">
<Div id = "back_div">
<iframe style = "Posisi: absolute; kiri: 0px; atas: 0px; kiri: 0px; bawah: 0px; float: kiri; z-index: -1; margin: 0px; padding: 0px;" frameborder = "0" scrolling = "no" id = "ifr"> </iframe>
</div>
<Div style = "Lebar: 500px; posisi: absolute; float: kiri; atas: 25%; kiri: 30%; z-index: 999; jelas: keduanya; overflow: tersembunyi;" id = "t_div">
<iframe style = "Posisi: absolute; kiri: 0px; atas: 0px; kiri: 0px; bawah: 0px; float: kiri; z-index: -1; margin: 0px; padding: 0px;" frameborder = "0" scrolling = "no" id = "ifr"> </iframe>
<u> </u> <u> </u> <u> </u>
<div onmousedown = "moveEvent (event, 't_div')">
<span> Selamat datang </span>
<a href = "javascript:" ontClick = "cl ('t')"> × </a>
</div>
<div> Selamat datang di: wulin.com
</div>
<div> </div>
<u> </u> <u> </u> <u> </u>
</div>
</div>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.