In diesem Artikel wird die Methode von JS+CSS beschrieben, um eine Popup-Schicht für Drag & Drop-Spezialeffekte im Umlauf von Drag & Drop zu implementieren. Teilen Sie es für Ihre Referenz. Die Details sind wie folgt:
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Pop -Schicht mit einem schönen abgerundeten Eckffekt von JS+CSS </title>
<Styles>
Körper{
Rand: 0px;
Polsterung: 0px;
Schriftgröße: 14px;
}
#T {
Position: absolut;
float: links;
links: 0px;
Oben: 0px;
}
#A {
float: links;
}
.al {
Deckkraft: 0,80;
Filter: progid: dimaTeTransform.microsoft.Alpha (style = 0, opacity = 80, FinishoPacity = 100);
}
.al2 {
Deckkraft: 0,00;
Filter: progid: dimaTeTransform.microsoft.Alpha (style = 0, opacity = 0, FinishoPacity = 100);
}
U {
Anzeige: Block;
Überlauf: versteckt;
Höhe: 1PX
}
U.F1 {
Hintergrundfarbe:#5cc;
Hintergrund: #5cc;
Rand: 0px 3px
}
U.F2 {
Hintergrundfarbe:#5cc;
Grenzrechte: #5cc 2px Solid;
Rand: 0px 1px;
Grenze links: #5cc 2px fest
}
U.F3 {
Hintergrundfarbe:#5cc;
Grenzrechte: #5cc 1px Solid;
Rand: 0px 1px;
Grenze links: #5cc 1px fest
}
.d_top {
klar: beides;
Überlauf: versteckt;
Hintergrundfarbe:#5cc;
Höhe: 29px;
vertikaler Align: unten;
}
.d_top a {
float: rechts;
Rand: 5px;
Rand-Rechts: 13px;
Padding-Top: 3px;
Breite: 18px;
Farbe: Rot;
Hintergrundfarbe:#789;
Textdekoration: Keine;
Schriftgewicht: fett;
Text-Align: Mitte;
vertikaler Align: Mitte;
}
.d_top span {
float: links;
Schriftgröße: 13px;
Rand-Links: 15px;
Rand: 8px;
}
.d_body {
Grenzrechte: #5cc 3px Solid;
Border-Links: #5cc 3px Solid;
Polsterung: 10px;
Höhe: 200px;
Hintergrundfarbe: #ffff;
}
.d_foot {
klar: beides;
Überlauf: versteckt;
Hintergrundfarbe:#5cc;
Höhe: 2px;
}
</style>
<script type = "text/javaScript">
Funktion $ (id) {return document.getElementById (id);}
Funktionshow (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 = "";
}
Funktion Cl (id) {
$ (id) .style.display = "keine";
}
Funktion MoveEvent (e, id) {
var isie = (document.all)? Richtig: Falsch;
Drag = True;
xx = isie? event.x: e.Pagex;
yy = issie? event.y: e.pagey;
L = document.getElementById (id) .OffsetLeft;
T = document.getElementById (id) .Offsettop;
document.onmousemove = function (e) {
if (Drag) {
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 () {
Drag = 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 = "Position: absolut; links: 300px; Top: 200px;">
<a href = "javaScript:" onclick = "show ('T')"> Klicken Sie hier, um den Div mit dem abgerundeten Eckffekt zu popieren </div>
<div id = "t" style = "display: keine;">
<div id = "back_div">
<iframe style = "Position: absolut; links: 0px; ober: 0px; links: 0px; unten: 0px; float: links; Z-Index: -1; Margin: 0px; Polsterung: 0px;" Framborder = "0" scrolling = "no" id = "ifr"> </iframe>
</div>
<Div style = "width: 500px; Position: absolut; float: links; oben: 25%; links: 30%; Z-Index: 999; klar: Beide; Überlauf: versteckt;" id = "t_div">
<iframe style = "Position: absolut; links: 0px; ober: 0px; links: 0px; unten: 0px; float: links; Z-Index: -1; Margin: 0px; Polsterung: 0px;" Framborder = "0" scrolling = "no" id = "ifr"> </iframe>
<u> </u> <u> </u> <u> </u>
<div onmouseDown = "MoveEvent (Ereignis, 'T_DIV')">
<Pan> Willkommen </span>
<a href = "javaScript:" onclick = "cl ('t')"> × </a>
</div>
<Div> Willkommen bei: Wulin.com
</Div>
<div> </div>
<u> </u> <u> </u> <u> </u>
</Div>
</div>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.