<!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>jQuery仿美橙右侧悬浮在线qq客服代码</title>
</head>
<body><script src="/demos/googlegg.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif ,"新宋体";}
p{margin:0px;padding:0px;line-height:20px;}
i{margin:0px;padding:0px;font-style:normal;}
ul{margin:0px;padding:0px;list-style:none;}
ul li{margin:0px;padding:0px;list-style:none;}
a{color:#333333;text-decoration:none;}
a:hover{color:#ff5a00;text-decoration:none;}
.clear{clear:both;font-size:0px;line-height:0;height:0;}
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?qradjf');
src:url('fonts/icomoon.eot?qradjf#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?qradjf') format('truetype'),
url('fonts/icomoon.woff?qradjf') format('woff'),
url('fonts/icomoon.svg?qradjf#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.demo-icon{
font-family:"icomoon";
font-style:normal;
font-weight:normal;
speak:none;
display:inline-block;
text-decoration:inherit;
text-align:center;
font-variant:normal;
text-transform:none;
font-size:24px;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:24px;
color:#999;
}
/*new right*/
.cndns-right{position:fixed;right:1px;top:50%;margin-top:-100px;z-index:100}
.cndns-right-meau{position:relative;}
.cndns-right-btn{width:48px;height:48px;border:1px solid #ddd;text-align:center;display:block;margin-bottom:6px;position:relative;background-color:#fff}
.cndns-right-btn span{color:#848484;font-size:26px;line-height:48px;}
.cndns-right-btn sup{display:block;min-width:24px;height:24px;text-align:center;line-height:24px;color:#fff;border-radius: 50%;background-color:#ff6800;position:absolute;left:-12px;top:-12px;}
.cndns-right-btn p{color:#ff6800;font-size:14px;line-height:18px;padding-top:5px;display:none;}
.cndns-right-meau:hover .cndns-right-btn span{display:none}
.cndns-right-meau:hover .cndns-right-btn p{display:block;}
.meau-car .cndns-right-btn {border-color:#ff6800;margin-bottom:20px;}
.meau-car.cndns-right-meau:hover .cndns-right-btn{background-color:#ff6800}
.meau-car.cndns-right-meau:hover .cndns-right-btn span{color:#fff;display:block;}
.meau-car .cndns-right-btn span{color:#ff6800;}
.meau-sev .cndns-right-btn{border-color:#ff6800;background:url(images/02index-banner-8.gif) no-repeat #ff6800 center;}
.meau-sev .cndns-right-btn p{color:#fff}
.meau-sev .cndns-right-btn span{color:#fff}
.meau-top .cndns-right-btn span{font-size:12px;line-height:12px;padding-top:10px;display:block}
.meau-top .cndns-right-btn i{display:block;color:#999}
.meau-top.cndns-right-meau:hover .cndns-right-btn{background-color:#ff6800}
.meau-top.cndns-right-meau:hover .cndns-right-btn span{display:block;color:#fff}
.meau-top.cndns-right-meau:hover .cndns-right-btn i{color:#fff;}
.cndns-right-box{position:absolute;top:-15px;right:48px;padding-right:25px;display:none;}
.cndns-right-box .box-border{border:1px solid #ccc;border-top:4px solid #ff6800;padding:20px;background-color:#fff;-webkit-box-shadow: 0 3px 8px rgba(0,0,0,.15);-moz-box-shadow: 0 3px 8px rgba(0,0,0,.15);box-shadow: 0 3px 8px rgba(0,0,0,.15);position:relative}
.cndns-right-box .box-border .arrow-right{display:block;width:13px;height:16px;background:url(images/arrow.png) no-repeat;position:absolute;right:-13px;top:26px;}
.cndns-right-box .box-border .sev-t span{font-size:42px;float:left;display:block;line-height:56px;margin-right:20px;color:#d3d3d3}
.cndns-right-box .box-border .sev-t p{float:left;color:#ff6800;font-size:24px;line-height:28px;}
.cndns-right-box .box-border .sev-t p i{display:block;font-size:14px;color:#aaa;}
.cndns-right-box .box-border .sev-b{padding-top:15px;margin-top:15px;border-top:1px solid #e4e4e4}
.cndns-right-box .box-border .sev-b h4{color:#666;font-size:14px;font-weight:normal;padding-bottom:15px;}
.cndns-right-box .box-border .sev-b li{float:left;width:33.33333%}
.cndns-right-box .box-border .sev-b li a{display:inline-block;color:#999;font-size:13px;padding-left:43px;background:url(images/q1.gif) no-repeat left 3px;line-height:36px;}
.cndns-right-box .box-border .sev-b li a:hover{color:#ff6800}
.meau-sev .cndns-right-box .box-border{width:430px;}
.meau-contact .cndns-right-box .box-border{width:230px;}
.cndns-right-meau:hover .cndns-right-box{display:block}
.meau-code .cndns-right-box{top:inherit;bottom:-35px;}
.meau-code .cndns-right-box .box-border{width:156px;text-align:center;border-top:1px solid #ccc;}
.meau-code .cndns-right-box .box-border i{display:block;color:#f66e06;font-size:16px;line-height:16px;}
.meau-code .cndns-right-box .box-border .arrow-right{top:inherit;bottom:50px;}
.meau-sev .cndns-right-btn .demo-icon{display:none;}
.meau-sev:hover .cndns-right-btn{background:#ff6800}
.meau-zs .cndns-right-btn{background-color:#ff6800;color:#fff;margin-top:80px;border-color:#ff6800}
.meau-zs .cndns-right-btn span{color:#fff}
.meau-zs .cndns-right-btn p{color:#fff}
</style>
<!--右侧-->
<div class="cndns-right">
<div class="cndns-right-meau meau-car">
<a href="#" class="cndns-right-btn">
<span class="demo-icon"></span>
<sup>0</sup>
</a>
</div>
<div class="cndns-right-meau meau-sev">
<a href="javascript:" class="cndns-right-btn">
<span class="demo-icon"></span>
<p>
在线<br />
客服
</p>
</a>
<div class="cndns-right-box">
<div class="box-border">
<div class="sev-t">
<span class="demo-icon"></span>
<p>在线客服<i>服务时间：9:00-24:00</i></p>
<div class="clear"></div>
</div>
<div class="sev-b">
<h4>选择下列产品马上在线沟通：</h4>
<ul id="zixunUl">
<li><a href="javascript:void(0);">域名/主机</a></li>
<li><a href="javascript:void(0);">建站/网店</a></li>
<li><a href="javascript:void(0);">企业邮局</a></li>
<li><a href="javascript:void(0);">代理咨询</a></li>
<li><a href="javascript:void(0);">网站推广</a></li>
<li><a href="javascript:void(0);">橙云主机</a></li>
<li><a href="javascript:void(0);">域名交易</a></li>
<li><a href="javascript:void(0);">租用托管(BGP)</a></li>
<li><a href="javascript:void(0);">其他产品</a></li>
<div class="clear"></div>
</ul>
</div>
<span class="arrow-right"></span>
</div>
</div>
</div>
<div class="cndns-right-meau meau-contact">
<a href="javascript:" class="cndns-right-btn">
<span class="demo-icon"></span>
<p>
客服<br />
热线
</p>
</a>
<div class="cndns-right-box">
<div class="box-border">
<div class="sev-t">
<span class="demo-icon"></span>
<p>400-123-4567<br /><i>7*24小时客服服务热线</i></p>
<div class="clear"></div>
jQuery仿美橙右侧悬浮在线qq客服代码.zip （10个子文件） 
js 
jquery-1.4.2.min.js 70KB
index.html 9KB images 
arrow.png 368B
02index-2.jpg 35KB
q1.gif 2KB 02index-banner-8.gif 4KB fonts icomoon.woff 4KB
icomoon.svg 12KB icomoon.eot 4KB icomoon.ttf 4KB资源评论
