Este artículo describe el método de JS+CSS para implementar una hermosa capa emergente de Efecto Especial de Corner Rounded Round de arrastre. Compártelo para su referencia. Los detalles son los siguientes:
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Pop Layer con hermoso efecto de esquina redondeada implementado por JS+CSS </title>
<estilo>
cuerpo{
margen: 0px;
relleno: 0px;
tamaño de fuente: 14px;
}
#t {
Posición: Absoluto;
flotante: izquierda;
Izquierda: 0px;
arriba: 0px;
}
#a {
flotante: izquierda;
}
.al {
Opacidad: 0.80;
Filtro: progid: dximagetransform.microsoft.alpha (style = 0, opacidad = 80, metaPacity = 100);
}
.al2 {
Opacidad: 0.00;
Filtro: progid: dximagetransform.microsoft.alpha (style = 0, opacidad = 0, metaPacity = 100);
}
U {
Pantalla: bloque;
Desbordamiento: oculto;
Altura: 1px
}
U.F1 {
Color de fondo:#5CC;
Antecedentes: #5cc;
Margen: 0px 3px
}
U.F2 {
Color de fondo:#5CC;
Border-Right: #5cc 2px sólido;
Margen: 0px 1px;
Border-izquierda: #5cc 2px sólido
}
U.F3 {
Color de fondo:#5CC;
Border-Right: #5cc 1px sólido;
Margen: 0px 1px;
Border-izquierda: #5cc 1px sólido
}
.d_top {
claro: ambos;
desbordamiento: oculto;
Color de fondo:#5CC;
Altura: 29px;
Align vertical: fondo;
}
.d_top a {
flotante: correcto;
margen-top: 5px;
margen-derecha: 13px;
Top-top: 3px;
Ancho: 18px;
Color: rojo;
Color de fondo:#789;
Decoración de texto: ninguna;
Font-Weight: Bold;
Text-Align: Center;
Align vertical: medio;
}
.d_top span {
flotante: izquierda;
tamaño de fuente: 13px;
margen izquierda: 15px;
margen-top: 8px;
}
.d_body {
Border-Right: #5cc 3px sólido;
Border-izquierda: #5cc 3px sólido;
relleno: 10px;
Altura: 200px;
Color de fondo: #ffff;
}
.d_foot {
claro: ambos;
desbordamiento: oculto;
Color de fondo:#5CC;
Altura: 2px;
}
</style>
<script type = "text/javaScript">
función $ (id) {return document.getElementById (id);}
función 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 = "";
}
función cl (id) {
$ (id) .style.display = "Ninguno";
}
función MoveVent (e, id) {
var isie = (document.all)? Verdadero: falso;
drag = 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 (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>
</ablo>
<Body>
<div id = "a" estilo = "posición: absoluto; izquierda: 300px; arriba: 200px;">
<a href = "javaScript:" onClick = "show ('t')"> Haga clic aquí para aparecer el DIV con el efecto de esquina redondeado </a> <a href = '// www.vevb.com/' target = '_ en blanco'> <U> cuadro de diálogo </U> </a>! </div>
<div id = "t" style = "Display: None;">
<div id = "back_div">
<iframe style = "posición: absoluto; izquierda: 0px; arriba: 0px; izquierda: 0px; fondo: 0px; float: izquierda; z-índice: -1; margen: 0px; relleno: 0px;" FrameBorDer = "0" Scrolling = "No" id = "IFR"> </iframe>
</div>
<Div style = "ancho: 500px; posición: absoluto; flotante: izquierda; arriba: 25%; izquierda: 30%; índice z: 999; claro: ambos; desbordamiento: oculto;" id = "t_div">
<iframe style = "posición: absoluto; izquierda: 0px; arriba: 0px; izquierda: 0px; fondo: 0px; float: izquierda; z-índice: -1; margen: 0px; relleno: 0px;" FrameBorDer = "0" Scrolling = "No" id = "IFR"> </iframe>
<u> </u> <u> </u> <u> </u>
<div onmousedown = "MoveVent (evento, 't_div')">
<span> bienvenido </span>
<a href = "javaScript:" onClick = "cl ('t')"> × </a>
</div>
<Div> Bienvenido a: wulin.com
</div>
<div> </div>
<u> </u> <u> </u> <u> </u>
</div>
</div>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.