Sham@双目瞿 这个是很多年前自己做的一个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没有去使用，因为主题已经带了，如果大家感兴趣，可以去自行开发下。
最新评论