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>