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

最新推荐文章于 2024-08-04 16:33:59 发布

磐石区

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量3.7k

点赞数 1

分类专栏： HTML 文章标签： HTML CSS javascript 左边栏滑动可关闭

本文链接：https://blog.csdn.net/panshiqu/article/details/8812453

版权

本文介绍了如何使用HTML、CSS和JavaScript实现一个具有关闭功能的左侧滑动栏。作者通过分享自己的实践过程，展示了实现这一功能的代码片段，适合初学者参考。

摘要由CSDN通过智能技术生成

这段时间公司做新的网站，一些小功能自然落到了我的头上，可是我只会编程呀，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

最低0.47元/天解锁文章

磐石区

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
HTML+CSS+JS实现左边栏滑动框带关闭按钮

这段时间公司做新的网站，一些小功能自然落到了我的头上，可是我只会编程呀，WEB前端设计，CSS样式只是知道一点点，但是我还是“连抄带偸”实现了功能，直接上代码。Panshiqu body { height: 2000px; } .leftbox { position: fixed; left: 10px; top: 150px; _position: a
复制链接

扫一扫

专栏目录