<!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 collapsed 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 >
Only implement the core part, as for improving the content yourself, or continuing to beautify it, it should be good!
<div ><div onmouseover="openbox()"><a href="/" onclick="openbox()">Welcome</a><div class="zzsky"><marquee align="left" onmouseover="stop()" onmouseout="start()">Welcome valuable suggestions! </marquee></div></div>
<div ><a href="#" onclick="closebox()">Close</a>
<script type="text/javascript">
<!--
var scroll=("scroll")
var main=("main")
var open=("open")
var close=("close")
="visible"
function runright()
{
/*Here -4 is mainly for better display, because I set the border*/
=+-4+"px"
=+-4+"px"
/*Execute this function every once in a while*/
setTimeout("runright()",30)
}
/*Close: Set the height to be reduced*/
function closebox()
{
=-4+"px"
if (>20)
{
setTimeout("closebox()",5)
}
else
{
="hidden"
}
}
function openbox()
{
if (<148)
{
="visible"
=+2+"px"
setTimeout("openbox()",5)
}
}
runright();
//-->
</script>
</div>
</div>
</div>
</body>
</html>