Skip to the content.

HTML+CSS+JS实现左边栏滑动框带关闭按钮

2013-04-17 10:02:42


这段时间公司做新的网站,一些小功能自然落到了我的头上,可是我只会编程呀,WEB前端设计,CSS样式只是知道一点点,但是我还是“连抄带偷”实现了功能,直接上代码。

<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panshiqu</title>
</head>

<body>
<style>
	body {
		height: 2000px;
	}
	.leftbox {
		position: fixed;
		left: 10px;
		top: 150px;
		_position: absolute;
		_top: expression(eval(document.documentElement.scrollTop+150));
		_left: expression(eval(document.documentElement.scrollLeft));
	}
	.leftclose {
		position: fixed;
		left: 10px;
		top: 137px;
		cursor: pointer;
		_position: absolute;
		_top: expression(eval(document.documentElement.scrollTop+137));
		_left: expression(eval(document.documentElement.scrollLeft));
	}
</style>
<div id="leftbox" class="leftbox"><img src="http://www.tida120.com/images/fudong.jpg" /></div>
<div id="leftclose" class="leftclose" onclick="imclose()"><img src="http://www.tida120.com/images/ico_close.gif" /></div>
<script language="javascript">
	function imclose() {
		document.getElementById("leftbox").style.display="none";
		document.getElementById("leftclose").style.display="none";
	}
</script>
</body>
</html>