这个是很多年前自己做的一个CSS版漂浮侧边栏,通过简单的CSS就能实现。
其实很简单,就是通过设置图层的固定位置,来实现悬浮,主要的CSS是这几个:
/*让图层位置固定*/
position:fixed;
/*让图层悬浮起来,显示在最上面一层*/
z-index:999;
/*让图层在差不左面的中间位置,如果需要在右面,就把left换成right*/
top:45%;left:0;
这个可以自己设置值来调节,比如宽高,上中下等等。
为了让效果更好,能自动隐藏,就还需要继续丰富代码,下面是完整代码:
<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;
}</code>
/*悬浮窗口内容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>
出生年月:</br>
星座:天蝎</br>
血型:貌似是O型</br>
爱好:上网瞎折腾,发呆,睡觉</br>
优点:没发现</br>
缺点:太多,省略5000字</br>
邮箱地址:sham@shamqu.cn
</div>
</div>
<div class="squ-sideb>
<div class="b">
关
于
我
</div>
</div>
</div>
<!--侧栏漂浮结束-->
具体效果可以看图片,或者去我的回忆演示站看下。
其实很多网站浮动在右下角的返回到顶部的功能,应该通过这个也可以实现,只是把链接定位到某个位置或者换成#就可以了,不过Sham没有去使用,因为主题已经带了,如果大家感兴趣,可以去自行开发下。
最新评论
您的行政服务小程序V2正好我们有需求,能否给个联系方式沟通下呢?谢谢!
想咨询楼主
牛逼的楼主 感谢分享 学习学习
public function UpdateDomainRecord($ip)这里会报错
学习学习
新生进来学习
目前正在找食堂报餐的小程序,看了下评论发现楼主真的是行政文员,真的太牛逼,让我不得不敬佩!我会一直关注着您的
感谢分享!这个举动真的太伟大了,我正愁着没有什么可以学习参考的了,最近有个项目也是类似的,真的是辛苦了,会一直持续关注您的!