特效描述: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>