Este artigo descreve o método do JS para implementar a expansão e contração da camada DIV no canto inferior direito. Compartilhe para sua referência. O método de implementação específico é o seguinte:
A cópia do código é a seguinte:
<!
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<título> JS implementa uma camada div que pode ser expandida e contratada no canto inferior direito </title>
<style type = "text/css">
<!-
*{margem: 0; preenchimento: 0;}
corpo {text-align: Center;}
#main {borda: vermelho 1px Solid; largura: 1000px; altura: 1600px; margem: 0 auto;}
#main #scroll {width: 250px; altura: 150px; borda: verde 1px sólido; alinhamento de texto: esquerda; posição: absoluto; visibilidade: oculta;}
#main #scroll #open {float: esquerda; text-align: Center; largura: 180px;}
#Main #Scroll #Close {Float: Right;}
//->
</style>
</head>
<Body>
<div id = "main">
Implementar apenas a parte principal, assim como para melhorar o conteúdo ou continuar embelezando -o, deve ser bom!
<div id = "scroll"> <div id = "aberto" onmouseover = "OpenBox ()"> <a href = "/" onclick = "OpenBox ()"> welcome </a> <div id = "close"> <marquee align = "esquerda" onmouseover = "stop ()" onmouseout = "start ()"> valiações e valiações! </marquee> </div> </div>
<div id = "Close"> <a href = "#" onclick = "closebox ()"> feche </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.visibility = "visível"
função runright ()
{
/*Aqui -4 é principalmente para melhor exibição, porque eu defino a borda*/
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"
/*Execute esta função de vez em quando*/
setTimeout ("runright ()", 30)
}
/*Feche: defina a altura a ser reduzida*/
função closebox ()
{
scroll.style.Height = scroll.offsetheight-4+"px"
if (scroll.offsetHeight> 20)
{
setTimeout ("CloseBox ()", 5)
}
outro
{
close.style.visibility = "Hidden"
}
}
função OpenBox ()
{
if (scroll.offsetHeight <148)
{
close.style.visibility = "visível"
scroll.style.Height = scroll.offsetheight+2+"px"
setTimeout ("OpenBox ()", 5)
}
}
runright ();
//->
</script>
</div>
</div>
</div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.