This article describes the method of JS to implement the expansion and contraction of the DIV layer in the lower right corner. Share it for your reference. The specific implementation method is as follows:
The code copy is as follows:
<!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 implements a DIV layer that can be expanded and contracted in the lower right corner</title>
<style type="text/css">
<!--
*{margin:0;padding: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">
Only implement the core part, as for improving the content yourself, or continuing to beautify it, it should be good!
<div id="scroll"><div id="open" onmouseover="openbox()"><a href="/" onclick="openbox()">Welcome</a><div id="close"><marquee align="left" onmouseover="stop()" onmouseout="start()">Welcome valuable suggestions! </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"
function runright()
{
/*Here -4 is mainly for better display, because I set the border*/
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 this function every once in a while*/
setTimeout("runright()",30)
}
/*Close: Set the height to be reduced*/
function closebox()
{
scroll.style.height=scroll.offsetHeight-4+"px"
if (scroll.offsetHeight>20)
{
setTimeout("closebox()",5)
}
else
{
close.style.visibility="hidden"
}
}
function 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>
I hope this article will be helpful to everyone's JavaScript programming.