好哇网

javascript 实现动态侧边栏实例详解

作者 2021-05-4 538

javascript 实现动态侧边栏

总的来说就是利用 鼠标悬停onmouseover 和 鼠标移除onmouseout 这两个时间来完成的。

首先是HTML 结构

1
2
3
4
5
<body>
<div id="div1">
<span>侧边栏</span>
</div>
</body>

然后是css的样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#div1{
  width:150px;
  height:200px;
  background:#999999;
  position:absolute;
  left:-150px;}
span{
  width:20px;
  height:70px;
  line-height:23px;
  background:#09C;
  position:absolute;
  right:-20px;
  top:70px;}

默认的样式 侧边栏是隐藏起来的,当鼠标移入以后展开div;

下面是完整代码:

Tips:You can change the code before run.

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

发表评论

好哇网,每天提供1000+次下载,做你身边靠谱的下载站!

立刻探索下载

留言咨询