不少网站或者插件有提供侧边的悬浮窗口，可以用来起提示作用，或者提供一些分享到的功能，又或者用来放置广告。
Sham不懂JS，所以用CSS做了一个，其实很简单，就是通过设置

position:fixed;z-index:999;

这样就可以让DIV漂浮起来，接下来就是设置

top:45%;left:0;

这样就可以让层漂浮在左侧，差不多中间位置，这个可以自己设置值来调节。如果想要漂浮在右侧，则将left换成right就好了
当然还要设置DIV的宽和高。

进阶：让悬浮窗口默认是隐藏的，鼠标移上去的时候自动滑出。
首先，在悬浮窗口的DIV中放入2个DIV，一个是要放置的内容层，一个是触发滑出的按钮层。然后将悬浮窗口DIV的left设成负值，具体看该DIV的witdh来定，具体参考如下示例代码：

<style type="text/css">
/*悬浮窗口总体DIV squ-side*/
#squ-side{
width:250px;
height:auto;
margin:0px;
position:fixed;
background:none;
z-index:999999;
overflow:hidden;
top:40%;
left:-220px;/*具体负的值根据为*/
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
}

/*悬浮窗口内容DIV squ-sidec*/
.squ-sidec{
float:left;
width:210px;
border:2px solid #ccc;
box-shadow:0px 5px 5px #565656;
-webkit-box-shadow:0px 5px 5px #565656;
-moz-box-shadow:0px 5px 5px #565656;
-o-box-shadow:0px 5px 5px #565656;
}

/*悬浮窗口出发移动渐显的按钮DIV squ-sideb*/
.squ-sideb{
float:right;
width:25px;
}
.squ-sideb .b{
height:auto;
border:2px solid #ccc;
box-shadow:0px 5px 5px #565656;
-webkit-box-shadow:0px 5px 5px #565656;
-moz-box-shadow:0px 5px 5px #565656;
-o-box-shadow:0px 5px 5px #565656;
}

/*鼠标触发渐显效果*/
#squ-side:hover{
left:0px;
}
#squ-side:hover .squ-sideb .b{
opacity:0;
filter:alpha(opacity=0);
}

</style>
<!--侧栏漂浮开始-->
<div id="squ-side">
<div class="squ-sidec">
<div>About Me</div>
<div style="text-align:left;">
性别：男</br>
出生年月：1984年10月31日</br>
星座：天蝎</br>
血型：貌似是O型</br>
爱好：上网瞎折腾，发呆，睡觉</br>
优点：没发现</br>
缺点：太多，省略5000字</br>
邮箱地址：sham@shamqu.cn
</div>
</div>
<div class="squ-sideb>
<div class="b">
关
于
我
</div>
</div>
</div>
<!--侧栏漂浮结束-->

怎么样，看到效果了吗，呵呵，有兴趣的朋友可以再继续折腾，代码有限，思维无限！
不过单纯用CSS来做的话有个缺点，就是不能自动根据内容调节悬浮位置，需要手动设置。
此代码只为分享一种方式，不喜勿噴。

作者：Sham
发表日期：2012-08-11 01:14
分类：作品与想法
标签：css, 悬浮窗口
固定链接：https://memory.shamqu.cn/side-float-div.html
转载请说明出处；如内容侵犯到您的版权，请与我联系。
分享到：