点击(此处)折叠或打开

<!DOCTYPE html>
<html>
<head>
<meta charset=\"UTF-8\" />
<title>潜水曝气机</title>
<style>
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0 }
body, button, input, select, textarea { font:12px Arial, Helvetica, sans-serif }
h1, h2, h3, h4, h5, h6 { font-size:100%; color:#333; font-family:\'微软雅黑\', \'YaHei\', \'黑体\', \'Hei\', Tahoma, Helvetica, arial, sans-serif; }
address, cite, dfn, em, var { font-style:normal }
code, kbd, pre, samp { font-family:courier new, courier, monospace }
small { font-size:12px }
ul, ol, li { list-style:none }
a { color:#ff6e03; text-decoration:none }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top }
sub { vertical-align:text-bottom }
legend { color:#000 }
fieldset, img { border:0 }
button, input, select, textarea { font-size:100%; vertical-align:middle; }
select{padding:2px;border:1px solid #ddd; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px }
table { border-collapse:collapse; border-spacing:0 }
img { vertical-align:top; display:inline-block; background-color:none;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { display:block; margin:0; padding:0 }
mark { background:#ff0 }
object, embed { outline:0 }
p { line-height:1.6; color:#aaa }
.mt10 { margin-top:10px }
.fs14 { font-size:14px }
.service_box{ position:fixed; z-index:1000;right:-147px;top:50%;margin-top:-100px;width:146px;border:1px solid #ece8e5; background:#fff; }
.service_box .tab_nav{ position:absolute;left:-42px;top:-1px;}
.service_box .tab_nav > li {background:#ece8e5;border-bottom:1px solid #dfdbd9;}
.service_box .tab_nav > li.active{ background:#ff6b09;}
.service_box .tab_nav > li:first-child{border-radius:8px 0 0;}
.service_box .tab_nav > li:last-child{ border-bottom:none; border-radius:0 0 0 8px;}
.service_box .tab_nav > li > a{ display:block; width:28px;padding:12px 6px 12px 8px; line-height:14px; text-align:center;color:#2c2c2c; text-decoration:none;}
.service_box .tab_nav > li.active > a{ color:#fff;}
.service_box .tab_nav .icon{ display:block; height:28px;width:28px; background:url(/images/bg_online_service_new.gif) no-repeat; overflow:hidden;margin:3px 0;*margin:6px 0;}
.service_box .tab_nav .icon_1{ background-position:0 0 ;}
.service_box .tab_nav .icon_2{ background-position:-28px 0 ;}
.service_box .tab_nav .icon_3{ background-position:-56px 0 ;}
.service_box .tab_nav .active .icon_1{ background-position:0 -28px ;}
.service_box .tab_nav .active .icon_2{ background-position:-28px -28px ;}
.service_box .tab_nav .active .icon_3{ background-position:-56px -28px ;}
.service_box .tab_content{padding:20px 5px 10px; position:relative;}
.service_box .tab_plan{ display:none; text-align:center;}
.service_box .tab_plan p{color:#333;}</style>
<script type=\"text/javascript\" src=\"/js/jquery-1.7.2.min.js\"></script>
</head>
<body>
<div class=\"service_box\">
<ul class=\"tab_nav\">
<li><a href=\"http://sc.admin5.com\"><i class=\"icon icon_1\"></i>在线客服</a></li>
<li><a href=\"http://sc.admin5.com\"><i class=\"icon icon_3\"></i></a></li>
</ul>
<div class=\"tab_content\">
<div class=\"tab_plan\">
<p class=\"fs14\">在线客服1:<br />
<a target=\"_blank\" href=\"http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes\" class=\"qq_link\"><img border=\"0\" src=\"http://wpa.qq.com/pa?p=2:2833026848:51\" alt=\"点击这里给我发消息\" title=\"点击这里给我发消息\"></a></p>
<p class=\"fs14 mt10\">在线客服2:<br />
<a target=\"_blank\" href=\"http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes\" class=\"qq_link\"><img border=\"0\" src=\"http://wpa.qq.com/pa?p=2:123456789:51\" alt=\"点击这里给我发消息\" title=\"点击这里给我发消息\"></a></p>
<p class=\"fs14 mt10\">商务客服:<br />
<a target=\"_blank\" href=\"http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes\" class=\"qq_link\"><img border=\"0\" src=\"http://wpa.qq.com/pa?p=2:2833026848:51\" alt=\"点击这里给我发消息\" title=\"点击这里给我发消息\"></a></p>
<p class=\"mt10\">服务时间:<br />
9:00-18:00(工作日)<br />
</p>
</div>
<div class=\"tab_plan\" style=\"display: none;\"><img src=\"/images/weixin.jpg\" alt=\"官方微信自助客服\" width=\"130\" height=\"130\">
<p>扫一扫关注站长素材</p>
</div>
</div>
</div>
<script type=\"text/javascript\">
$(\".service_box .tab_nav li\").hover(function(){
var i=$(this).index();
$(this).addClass(\"active\").siblings().removeClass(\"active\");
$(\".service_box .tab_plan:eq(\"+i+\")\").show().siblings().hide();
});
$(function(){
var t;
$(\".service_box\").hover(function(){
$(\".service_box\").animate({right:0},300)
clearTimeout(t);
},function(){
t=setTimeout(function(e){
$(\".service_box\").animate({right:\"-146px\"},300);
$(\".service_box\").find(\".tab_nav li\").removeClass(\"active\");
},1000);
});
});
var isTransition=true;
$(\".m_logo\").hover(function(){
var r=0;
if(isTransition){
animateTime = setInterval(function(){
if (r>=153){
clearInterval(animateTime);
isTransition=true;
}else{
isTransition=false;
r++;
$(\".m_logo a\").attr(\"style\",\"-webkit-mask:-webkit-gradient(radial, 45 25, \"+r+\", 45 25, \"+(r+15)+\", from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)));\")
};
},5);
}
},function(){
return;
});
</script>
<!--[if lt IE 7]>
<div style=\"text-align:center;margin:50px 0; font:normal 14px/24px \'MicroSoft YaHei\';\">
</div>
<p>如果出现网页错误看不到效果,请刷新网页.在你实际使用时不会出现这样的情况!</p>
</body>
</html>

ITPub博客

带微信二维码的QQ客服代码

最新文章