浮动，可伸缩菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/chenglidian/article/details/6739219

本文介绍了一个使用CSS样式和JavaScript实现的动态元素显示案例。该案例中，一个绿色方块通过JavaScript控制，在鼠标悬停时平滑移动，并随着页面滚动而调整位置。此效果涉及CSS定位属性及JavaScript事件监听和DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<style type="text/css">
body{ margin:0;padding:0;}	
#a{width:100px; height:100px; background-color:green; position:relative; left:-90px;top:100px;}
#aa{width:10px;height:100px; background-color:red; float:right;}
</style>
<script type="text/javascript">
	var speed=2;
	var i=-90;
	var b;

	function show(){
			clearInterval(b);
			c=setInterval("show_in()",10);
		}
		function show_in(){
				if(i<0){
						i=i+speed;
						document.getElementById("a").style.left=i;
					}
			}
			
			
	function hide(){
			clearInterval(c);
			 b=setInterval("hide_in()",10)
		}
		function hide_in(){
				if(i>-90){
						i=i-speed;
						document.getElementById("a").style.left=i;
					}
			}	
			
		window.οnscrοll=function load(){
			document.getElementById("a").style.top=document.body.scrollTop+100+"px";
			setTimeout("load()",10);
			}	
			//setInterval("load()",10);
</script>
</head>
<body>
	<div id="a" onMouseOver="show()" onMouseOut="hide()">
		<div id="aa">
		</div>
	</div>
    
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
</body>
</html>