Cet article décrit la méthode de JS pour mettre en œuvre l'expansion et la contraction de la couche Div dans le coin inférieur droit. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd html 4.0 transitional // en">
<html>
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> JS implémente une couche div qui peut être élargie et contractée dans le coin inférieur droit </TITAL>
<style type = "text / css">
<! -
* {marge: 0; rembourrage: 0;}
Body {Text-Align: Center;}
#Main {Border: Red 1px solide; largeur: 1000px; hauteur: 1600px; marge: 0 auto;}
#main #scroll {largeur: 250px; hauteur: 150px; bordure: vert 1px solide; Text-Align: gauche; position: absolue; visibilité: cachée;}
#main #scroll #Open {Float: Left; Text-Align: Centre; largeur: 180px;}
#main #scroll #close {float: à droite;}
// ->
</ style>
</ head>
<body>
<div id = "main">
Implémentez uniquement la partie principale, comme pour améliorer le contenu vous-même ou en continuant à l'embellir, cela devrait être bon!
<div id = "scroll"> <div id = "open" onMouseOver = "openbox ()"> <a href = "/" onclick = "openbox ()"> bienvenue </a> <div id = "close"> <marquee align = "Left" onMouseOver = "stop ()" onMouseout = "start ()"> bienvenue suggestives de valeur! </ 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 ("main")
var open = document.getElementById ("Open")
var close = document.getElementByid ("close")
scroll.style.visibilité = "visible"
fonction runright ()
{
/ * Ici -4 est principalement pour un meilleur écran, car je définis la bordure * /
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"
/ * Exécutez cette fonction de temps en temps * /
setTimeout ("runright ()", 30)
}
/ * Fermer: définir la hauteur à réduire * /
Fonction Closebox ()
{
scroll.style.height = scroll.offsetheight-4 + "px"
if (Scroll.offsetheight> 20)
{
setTimeout ("closebox ()", 5)
}
autre
{
close.style.visibilité = "Hidden"
}
}
fonction openbox ()
{
if (Scroll.offsetheight <148)
{
close.style.visibilité = "visible"
scroll.style.height = scroll.offsetheight + 2 + "px"
setTimeout ("openbox ()", 5)
}
}
runright ();
// ->
</cript>
</div>
</div>
</div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.