这个是很多年前自己做的一个CSS版漂浮侧边栏,通过简单的CSS就能实现。
其实很简单,就是通过设置图层的固定位置,来实现悬浮,主要的CSS是这几个:
1 2 3 4 5 6 |
/*让图层位置固定*/ position:fixed; /*让图层悬浮起来,显示在最上面一层*/ z-index:999; /*让图层在差不左面的中间位置,如果需要在右面,就把left换成right*/ top:45%;left:0; |
这个可以自己设置值来调节,比如宽高,上中下等等。
为了让效果更好,能自动隐藏,就还需要继续丰富代码,下面是完整代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<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没有去使用,因为主题已经带了,如果大家感兴趣,可以去自行开发下。
最新评论