右侧可以展开的在线客服效果----应用在都联网

原创

lflianglan 2013-05-24 17:22:03 博主文章分类：jQuery ©著作权

文章标签 jQuery 在线客服效果可以展开悬浮右侧 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者lflianglan的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!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>都联网在线客服</title>
<style type="text/css">
*{padding:0; margin:0;}
dl,dt,dd,ul,li{list-style:none;}
.BPonlineService{position:fixed; right:1px; top:180px;}
.BPonlineService dl{clear:both;}
.OnlineServiceBtn_hide,.OnlineServiceBtn_show{width:48px; height:15px; url(kefu.gif ) no-repeat 0 0; cursor:pointer; padding-top:130px; text-align:center; font-size:10px; float:left; margin-top:80px;}
.OnlineServiceCtn{ width:106px; height:280px; border:2px solid #FD9543; float:left; border-radius:6px;}
.OnlineServiceCtn ul li{height:86px; text-align:center;}
.OnlineServiceCtn ul li h3{font-size:16px; border-bottom:1px solid #d8d8d8; line-height:24px; margin:6px 4px;}
.OnlineServiceCtn ul li p{margin:10px 0; text-align:center; font-size:12px;}
.border_bottom{border-bottom:2px solid #FD9543; border-radius:6px; margin-bottom:4px;}
.border_top{border-top:2px solid #FD9543; border-radius:6px;}
p.mail_to{line-height:60px;}
.OnlineServiceCtn ul li p a{font-size:16px; font-weight:bold; text-decoration:none; color:#000;}
</style>
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".OnlineServiceBtn_hide").click(function(){
$(".OnlineServiceCtn").animate({width:"hide",opacity:"hide"}, "normal",function(){$(".OnlineServiceCtn").hide()});
$(this).hide();
$(".OnlineServiceBtn_show").show();
});
$(".OnlineServiceBtn_show").click(function(){
$(".OnlineServiceCtn").animate({width:"show",opacity:"show"}, "normal",function(){$(".OnlineServiceCtn").show()});
$(this).hide();
$(".OnlineServiceBtn_hide").show();
})
})
</script>
</head>
<body>
<div class="BPonlineService">
<dl>
<dt class="OnlineServiceBtn_hide">关闭</dt>
            <dd class="OnlineServiceBtn_show" style="display:none;">打开</dd>
            <dd class="OnlineServiceCtn">
<ul>
<li class="border_bottom">
<h3>QQ在线客服</h3>
                        <p><a href="tencent://message/?uin=1442203712&Site=&Menu=yes">QQ联系</a></p>
                    </li>
                    <li class="border_top border_bottom">
                        <p class="mail_to"><a href="mailto:doulianwang@telezone.cn">邮箱咨询</a></p>
                    </li>
                    <li class="border_top">
<h3>电话咨询</h3>
                        <p>010-51261933-315</p>
                        <p>400-080-0760</p>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>
</body>
</html>

这里只是提供了效果，带着简单的设计，您可以自己设计喜欢的颜色和风格哦，一下附件提供一个例子。