实例参考：
http://sc.chinaz.com/tag_jiaoben/zaixiankefu.html
代码：
css
1 @charset "utf-8";
2 *{margin:0;padding:0;list-style-type:none;} //所有左上角开始坐标
3 a,img{border:0;}
4 body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} //全部字体
5 /* side */ //侧边栏 6 .side{position:fixed;width:54px;height:275px;right:0;top:214px;z-index:100;}
7 .side ul li{width:54px;height:54px;float:left;position:relative;border-bottom:1px solid #444;}
8 .side ul li .sidebox{position:absolute;width:54px;height:54px;top:0;right:0;transition:all 0.3s;background:#000;opacity:0.8;filter:Alpha(opacity=80);color:#fff;font:14px/54px "微软雅黑";overflow:hidden;}
9 .side ul li .sidetop{width:54px;height:54px;line-height:54px;display:inline-block;background:#000;opacity:0.8;filter:Alpha(opacity=80);transition:all 0.3s;}
10 .side ul li .sidetop:hover{background:#ae1c1c;opacity:1;filter:Alpha(opacity=100);}
11 .side ul li img{float:left;}
html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>侧边栏在线客服</title>
6 <link rel="stylesheet" href="css/style.css" type="text/css" /> //css引入
7 <script src="js/jquery-2.0.3.min.js" type="text/javascript"></script> //js引入
8 <script type="text/javascript">
9 $(document).ready(function(){ //鼠标移动上去事件
10 $(".side ul li").hover(function(){
11 $(this).find(".sidebox").stop().animate({"width":"124px"},200).css({"opacity":"1","filter":"Alpha(opacity=100)","background":"#ae1c1c"})
12 },function(){
13 $(this).find(".sidebox").stop().animate({"width":"54px"},200).css({"opacity":"0.8","filter":"Alpha(opacity=80)","background":"#000"})
14 });
15
16 });
17 //回到顶部
18 function goTop(){
19 $(‘html,body‘).animate({‘scrollTop‘:0},600);
20 }
21 </script>
22 </head>
23 <body>
24 <div style="height:1000px;"></div>
25 <div class="side">
26 <ul>
27 <li><a href="#"><div class="sidebox"><img src="img/side_icon01.png">客服中心</div></a></li>
28 <li><a href="#"><div class="sidebox"><img src="img/side_icon02.png">客户案例</div></a></li>
29 <li><a href="javascript:void(0);" ><div class="sidebox"><img src="img/side_icon04.png">QQ客服</div></a></li>
30 <li><a href="javascript:void(0);" ><div class="sidebox"><img src="img/side_icon03.png">新浪微博</div></a></li>
31 <li style="border:none;"><a href="javascript:goTop();" class="sidetop"><img src="img/side_icon05.png"></a></li>
32 </ul>
33 </div>
34 <div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;">
35 <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
36 </div>
37 </body>
38 </html>
效果:
代码资源下载:
http://sc.chinaz.com/jiaoben/141105047690.htm
时间： 2024-12-27 12:54:29