この記事では、右下隅のdiv層の拡張と収縮を実装するJSの方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
コードコピーは次のとおりです。
<！doctype html public " - // w3c // dtd html 4.0 transitional // en">
<html>
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> JSは、右下隅に拡張および契約できるDivレイヤーを実装しています</title>
<style type = "text/css">
<！ -
*{マージン：0;パディング：0;}
body {Text-align：center;}
#main {border：red 1px solid; width：1000px; height：1600px; margin：0 auto;}
＃main #scroll {width：250px; height：150px; border：green 1px solid; text-align：left; position：absolute; visibility：hidden;}
＃main #scroll #open {float：left; text-align：center; width：180px;}
＃main #scroll #close {float：right;}
//->
</style>
</head>
<body>
<div id = "main">
コンテンツを自分で改善したり、美化し続けることに関しては、コアパーツのみを実装してください。
<div id = "scroll"> <div id = "open" onmouseover = "openbox（）"> <a href = "/" onclick = "openbox（）"> welcome </a> <div id = "close"> <marquee align = "left" onmouseover = "sop（）" onmouseout = " </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.visibility = "visible"
functionrunright（）
{
/*ここに-4は、主に境界線を設定するため、より良いディスプレイ用です*/
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"
/*時々この関数を実行する*/
setimeout（ "runright（）"、30）
}
/*閉じる：高さを減らす*/
関数closebox（）
{
scroll.style.height = scroll.offsetheight-4+"px"
if（scroll.offsetheigh> 20）
{
setimeout（ "closebox（）"、5）
}
それ以外
{
close.style.visibility = "hidden"
}
}
function openbox（）
{
if（scroll.offsetheight <148）
{
close.style.visibility = "visible"
scroll.style.height = scroll.offsetheight+2+"px"
setimeout（ "openbox（）"、5）
}
}
runright（）;
//->
</script>
</div>
</div>
</div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。