JQ网站右下角“嘿，欢迎咨询”客服代码

上篇我们发布了 “ js点击弹窗高效沟通前必看弹出层方法 ” 今天这篇jQuery右下角悬浮QQ在线客服可以搭配上篇教程使用，当然可以单独使用。下面我就来教大家怎么使用吧。

引用js

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

js代码

(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.556z.com';
}else{
var oWidth = 606,
oHeight = 630,
top = ($(window).height()/2)-(oHeight/2),
left = ($(window).width()/2)-(oWidth/2);
window.open('http://www.556z.com','','width='+oWidth+',height='+oHeight+',scrollbars=yes,top='+top+',left='+left+',resizable=yes');
}
});
})(jQuery);

html代码

<div style="height:4000px;"></div>
<div class="livechat-girl animated"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=394817050&site=qq&menu=yes" target="_blank">
<img class="girl" src="https://www.556z.com/zb_users/upload/2022/03/20220321174622164785598285110.png">
</a>
  <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>

PS：第三行代码a标签href输出QQ链接记得改成自己的。

css代码

@charset "utf-8";
blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, html, input, li, ol, p, pre, ul { padding: 0; margin: 0 }
address, caption, cite, code, em, h1, h2, h3, h4, h5, h6, pre, strong, table, td, th { font-size: 1em; font-style: normal; font-weight: 400 }
strong { font-weight: 700 }
ol, ul { list-style: none outside none }
fieldset, img { border: medium none; vertical-align: bottom }
caption, th { text-align: left }
table { border-collapse: collapse; border-spacing: 0 }
body { background: none repeat scroll 0 0 #FFF; color: #333; font: 12px/1 "微软雅黑", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif }
input, select, textarea { font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif }
a { outline: medium none }
a:active, a:link, a:visited { text-decoration: none; color: #000 }
a:hover { text-decoration: underline }
cite, em, i { font-styleign: center }
html { min-height: 101% }
.clearfix:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden }
.clearfix { display: inline-block }
html[xmlns] .clearfix { display: block }
*html .clearfix { height: 1% }
time { color: #777 }
article, aside, dialog, figure, footer, header, menu, nav, section { display: block }
ul { list-style: none }
a { text-decoration: none }
.clear { clear: both }
* { margin: 0; padding: 0 }
.f-l { float: left }
.f-r { float: right }
.clearfix:after { content: "/20"; display: block; visibility: hidden; clear: both; font-size: 0; line-height: 0; height: 0 }
 
@keyframes scaleToggleOne { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
50% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
@keyframes scaleToggleTwo { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
20% {
transform:scale(1);
-webkit-transform:scale(1)
}
60% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
@keyframes scaleToggleThree { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
33% {
transform:scale(1);
-webkit-transform:scale(1)
}
66% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
.animated { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.livechat-girl { width: 60px; height: 60px; border-radius: 50%; position: fixed; bottom: 0; right: 40px; opacity: 0; -webkit-box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); z-index: 700; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); cursor: pointer; -webkit-transition: all 1s cubic-bezier(.86, 0, .07, 1); transition: all 1s cubic-bezier(.86, 0, .07, 1) }
.livechat-girl:focus { outline: 0 }
.livechat-girl.animated { opacity: 1; transform: translateY(-40px); -webkit-transform: translateY(-40px); -ms-transform: translateY(-40px) }
.livechat-girl:after { content: ''; width: 12px; height: 12px; border-radius: 50%; background-image: linear-gradient(to bottom, #26c7fc, #26c7fc); position: absolute; right: 1px; top: 1px; z-index: 50 }
.livechat-girl .girl { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 50 }
.livechat-girl .animated-circles .circle { background: rgba(38,199,252,.25); width: 60px; height: 60px; border-radius: 50%; position: absolute; z-index: 49; transform: scale(1); -webkit-transform: scale(1) }
.livechat-girl .animated-circles.animated .c-1 { animation: 2s scaleToggleOne cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-2 { animation: 2.5s scaleToggleTwo cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-3 { animation: 3s scaleToggleThree cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl .livechat-hint { position: absolute; right: 40px; top: 50%; margin-top: -20px; opacity: 0; z-index: 0; -webkit-transition: all .3s cubic-bezier(.86, 0, .07, 1); transition: all .3s cubic-bezier(.86, 0, .07, 1) }
.livechat-girl .livechat-hint.show_hint { -webkit-transform: translateX(-40px); transform: translateX(-40px); opacity: 1 }
.livechat-girl .livechat-hint.hide_hint { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0) }
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1296px!important }
.livechat-girl .livechat-hint.rd-notice-tooltip .rd-notice-content { width: auto; overflow: hidden; text-overflow: ellipsis }
@media only screen and (max-width:1599px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1060px!important }
}
@media only screen and (max-width:1309px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 984px!important }
}
@media only screen and (max-width:1124px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 600px!important }
}
.rd-notice-tooltip { -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2); box-shadow: 0 2px 2px rgba(0,0,0,.2); font-size: 14px; border-radius: 3px; line-height: 1.25; position: absolute; z-index: 65; max-width: 350px; opacity: 1 }
.rd-notice-tooltip:after { position: absolute; display: block; content: ''; height: 20px; width: 20px; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 50 }
.rd-notice-tooltip .rd-notice-content { background: 0; border-radius: 3px; width: 100%; color: #fff; position: relative; z-index: 60; padding: 20px; font-weight: 400; line-height: 1.45 }
.rd-notice-type-success { background-color: #26c7fc; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) }
.rd-notice-type-success .rd-notice-content { background-color: #26c7fc }
.rd-notice-type-success:after { background-color: #26c7fc; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) }
.rd-notice-position-left { margin-left: -20px }
.rd-notice-position-left:after { right: -6px; top: 50%; margin-top: -10px }
.rd-notice-tooltip.single-line .rd-notice-content { height: 40px; padding: 0 20px; line-height: 40px; white-space: nowrap }

PS：搭配使用将html代码第三行a标签改成：

<a type="button" id="showModel">
<img class="girl" src="https://www.556z.com/zb_users/upload/2022/03/20220321174622164785598285110.png">
</a>

这样就可以点击调用高效沟通前必看弹窗了。使用前记得先整合下“ 弹窗高效沟通前必看 ”相关代码。当然还需要自行调整下css哈，不然可能会出错。没基础的不推荐适配。

1823

#笔记

请登录之后再进行评论

作者信息

老翰

活跃用户

随机内容

JQ网站右下角“嘿，欢迎咨询”客服代码

引用js

js代码

html代码

css代码

其他推荐

PHP暂停1秒的方法

php中16进制颜色与rgb颜色相互转换的方法

php中的数据类型有哪些

PHP中一些危险的函数注意事项

PHP判断文件夹是否存在，不存在则创建

PHP中注释类型详解

PHP中对象与数组的区别

PHP数组值求和的方法