蓝色美女在线qq客服系统代码

特效描述：jQuery 右下角鼠标悬停 在线客服特效，jQuery右下角鼠标悬停在线客服特效

代码部署教程

1. 引入CSS

<link href="css/css.css" rel="stylesheet" media="screen">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.1.min.js">

</script>

3. HTML代码

<div style="height:4000px;">
</div>

<div class="livechat-girl animated">

<img class="girl" src="images/en_3.png">

<div class="livechat-hint rd-notice-tooltip rd-notice-type-success rd-notice-position-left single-line show_hint">

<div class="rd-notice-content">

嘿，我来帮您！</div>

</div>

<div class="animated-circles">

<div class="circle c-1">

</div>

<div class="circle c-2">

</div>

<div class="circle c-3">

</div>

</div>

</div>

<script type="text/javascript">

(function($) {
setInterval(function(){
if($(".animated-circles").hasClass("animated")){
$(".animated-circles").removeClass("animated");
}else{
$(".animated-circles").addClass('animated');
}
},3000);
var wait = setInterval(function(){
$(".livechat-hint").removeClass("show_hint").addClass("hide_hint");
clearInterval(wait);
},4500);
$(".livechat-girl").hover(function(){
clearInterval(wait);
$(".livechat-hint").removeClass("hide_hint").addClass("show_hint");
},function(){
$(".livechat-hint").removeClass("show_hint").addClass("hide_hint");
}).click(function(){
if(isMobile){
window.location.href = 'http://www.baidu.com';
}else{
var oWidth = 606,
oHeight = 630,
top = ($(window).height()/2)-(oHeight/2),
left = ($(window).width()/2)-(oWidth/2);
window.open('http://www.baidu.com','','width='+oWidth+',height='+oHeight+',scrollbars=yes,top='+top+',left='+left+',resizable=yes');
}
});
})(jQuery);
</script>

演示地址下载地址