<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>win8扁平风格网站侧边栏在线客服 - 站长素材</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".side ul li").hover(function(){
$(this).find(".sidebox").stop().animate({"width":"124px"},200).css({"opacity":"1","filter":"Alpha(opacity=100)","background":"#ae1c1c"})
},function(){
$(this).find(".sidebox").stop().animate({"width":"54px"},200).css({"opacity":"0.8","filter":"Alpha(opacity=80)","background":"#000"})
});
});
//回到顶部
function goTop(){
$('html,body').animate({'scrollTop':0},600);
}
</script>
</head>
<body>
<div style="height:1000px;"></div>
<div class="side">
<ul>
<li><a href="#"><div class="sidebox"><img src="img/side_icon01.png">客服中心</div></a></li>
<li><a href="#"><div class="sidebox"><img src="img/side_icon02.png">客户案例</div></a></li>
<li><a href="javascript:void(0);" ><div class="sidebox"><img src="img/side_icon04.png">QQ客服</div></a></li>
<li><a href="javascript:void(0);" ><div class="sidebox"><img src="img/side_icon03.png">新浪微博</div></a></li>
<li style="border:none;"><a href="javascript:goTop();" class="sidetop"><img src="img/side_icon05.png"></a></li>
</ul>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div><br />
</body>
</html>
基于jquery实现的带返回顶部功能的在线客服网站侧边栏代码.zip （8个子文件） 
132677753938588140 css 
style.css 816B img 
side_icon01.png 2KB side_icon03.png 3KB side_icon02.png 2KB side_icon05.png 2KB side_icon04.png 3KB
index.html 2KB js jquery-2.0.3.min.js 82KB资源评论
