浮动，可伸缩菜单

最新推荐文章于 2021-08-21 20:12:33 发布

恼火的昵称

最新推荐文章于 2021-08-21 20:12:33 发布

阅读量578

点赞数

分类专栏： Javascript 文章标签： function float div c

本文链接：https://blog.csdn.net/chenglidian/article/details/6739219

版权

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<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>

恼火的昵称

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动，可伸缩菜单

body{ margin:0;padding:0;} #a{width:100px; height:100px; background-color:green; position:relative; left:-90px;top:100px;}#aa{width:10px;h
复制链接

扫一扫

专栏目录