Este artículo describe el método de JS para implementar la expansión y la contracción de la capa DIV en la esquina inferior derecha. Compártelo para su referencia. El método de implementación específico es el siguiente:
La copia del código es la siguiente:
<! Doctype html público "-// w3c // dtd html 4.0 transitional // en">
<html>
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS implementa una capa Div que puede ampliarse y contraerse en la esquina inferior derecha </title>
<style type = "text/css">
<!-
*{margen: 0; relleno: 0;}
cuerpo {text-align: centro;}
#main {borde: rojo 1px sólido; ancho: 1000px; altura: 1600px; margen: 0 auto;}
#Main #scroll {ancho: 250px; altura: 150px; borde: verde 1px sólido; text-align: izquierda; posición: absoluta; visibilidad: oculto;}
#Main #scroll #open {float: left; text-align: centro; ancho: 180px;}
#Main #scroll #close {float: right;}
//->
</style>
</ablo>
<Body>
<div id = "main">
Solo implementa la parte central, como para mejorar el contenido tú mismo o continuar embelleciéndolo, ¡debería ser bueno!
<div id = "scroll"> <div id = "Open" onMouseOver = "Openbox ()"> <a href = "/" onClick = "Openbox ()"> Bienvenido </a> <div ID = "Close"> <marquee align = "izquierda" OnMouseOver = "stop ()" OnMouseout = "Start ()> ¡bienvenido las sugerencias valiosas! </marquee> </div> </div>
<div id = "Close"> <a href = "#" onClick = "CloseBox ()"> Close </a>
<script type = "text/javaScript">
<!-
var scroll = document.getElementById ("Scroll")
var main = document.getElementById ("principal")
var abre = document.getElementById ("Open")
var cerrador = document.getElementById ("Cerrar")
scroll.style.visibility = "visible"
function runright ()
{
/*Aquí -4 es principalmente para una mejor pantalla, porque configuré el borde*/
scroll.style.top = document.body.scrolltop+document.body.clientheight-scroll.clientheight-4+"px"
scroll.style.left = document.body.scrollleft+document.body.clientwidth-scroll.clientwidth-4+"px"
/*Ejecutar esta función de vez en cuando*/
setTimeout ("runright ()", 30)
}
/*Cerrar: configure la altura para que se reduzca*/
función CloseBox ()
{
scroll.style.height = scroll.offsetheight-4+"px"
if (scroll.offsetheight> 20)
{
setTimeout ("CloseBox ()", 5)
}
demás
{
Close.style.visibility = "Hidden"
}
}
función Openbox ()
{
if (scroll.offsetheight <148)
{
Close.style.visibility = "Visible"
scroll.style.height = scroll.offsetheight+2+"px"
setTimeout ("Openbox ()", 5)
}
}
runright ();
//->
</script>
</div>
</div>
</div>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.