QQ在线客服配置教程(jQuery)

2018年3月24日08:35:29 发表评论 754 人围观

这次博主给大家带来源博客右下角QQ客服悬浮框的配置教程,过程非常简单。

#添加代码

在你的网站中,找到一个能被全站调用的页面,如footer.php(footer.html),找到后编辑页面,在 </body> 上一行,加入以下代码:

<style>
.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;
top: 80%;
right: 40px;
opacity: 0;
-webkit-box-shadow: 0 5px 10px 0 rgba(35, 50, 56, 0.3);
box-shadow: 0 5px 10px 0 rgba(35, 50, 56, 0.3);
z-index: 700;
transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
cursor: pointer;
-webkit-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
transition: all 1s cubic-bezier(0.86, 0, 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, #38dc79, #1ab744);
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;
border-radius: 100%
}

.livechat-girl .animated-circles .circle {
background: rgba(26, 183, 68, 0.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: 2000ms scaleToggleOne cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards
}

.livechat-girl .animated-circles.animated .c-2 {
animation: 2500ms scaleToggleTwo cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards
}

.livechat-girl .animated-circles.animated .c-3 {
animation: 3000ms scaleToggleThree cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards
}

.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 0.3s cubic-bezier(0.86, 0, 0.07, 1);
transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1);
background-color: #1ab744
}

.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)
}

.rd-notice-tooltip {
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
font-size: 14px;
border-radius: 3px;
line-height: 1.25;
position: absolute;
z-index: 65;
max-width: 350px
}

.rd-notice-tooltip.thumb-heart-tooltip {
z-index: 100;
margin-top: 19px
}

.rd-notice-tooltip.thumb-heart-tooltip .rd-notice-content {
padding: 10px 20px
}

.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;
top: 10px;
right: -6px;
background-color: #1ab744
}

.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-tooltip .rd-notice-content a {
color: #fff;
text-decoration: underline
}

.rd-notice-tooltip .arrow {
display: none !important
}

.rd-notice-tooltip.alert.rd-closing {
white-space: normal;
text-align: left
}

.rd-notice-tooltip.alert.rd-closing .rd-notice-content {
padding-right: 50px
}

.rd-notice-tooltip.single-line .rd-notice-content {
height: 40px;
padding: 0 20px;
line-height: 40px;
white-space: nowrap
}

@keyframes scaleToggleOne {
from {
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)
}
}
</style>
<a class="livechat-girl js-livechat-girl animated" id="lc-girl-block-en_2" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1239474058&amp;site=qq&amp;menu=yes" target="_blank"><img class="girl" border="0" src="../qq.png" alt="QQ在线客服配置教程(jQuery)" alt="点击这里给我发消息" title="点击这里给我发消息">
<div class="js-livechat-hint livechat-hint rd-notice rd-notice-tooltip single-line hide_hint">
<div class="popover-content rd-notice-content">嘿!有什么能帮到您的吗?</div>
</div>
<div class="animated-circles js-animated-circles animated">
<div class="circle c-1"></div>
<div class="circle c-2"></div>
<div class="circle c-3"></div>
</div>
</a>
<script type='text/javascript' src='../jquery-3.2.1.min.js'></script>
<script>
jQuery(function() {
setInterval(function() {
jQuery('.js-animated-circles').toggleClass('animated');
}, 4000);

jQuery('#lc-girl-block-en_2').on({
'mouseover': function() {
jQuery(this).find('.js-livechat-hint').removeClass('hide_hint').addClass('show_hint');
},
'mouseleave': function() {
jQuery(this).find('.js-livechat-hint').removeClass('show_hint').addClass('hide_hint');
}
})
});
</script>

 

#修改代码

 

添加好上面的代码后,需要修改几个地方才能正常使用:

 

1.找到代码中的http://wpa.qq.com/msgrd?v=3&amp;uin=1239474058&amp;site=qq&amp;menu=yes这个链接,将其中的1239474058改为你的QQ号码。(QQ号码需开通“QQ在线”功能。如未开通,请点这里开通)

 

2.找到代码中的<img class="girl" border="0" src="../qq.png" alt="QQ在线客服配置教程(jQuery)" alt="点击这里给我发消息" title="点击这里给我发消息">这里,更改图片路径(绝对路径)。

 

3.找到代码中的<script type='text/javascript' src='../jquery-3.2.1.min.js'></script>这里,更改jquery路径(绝对路径,页面已经引用jquery的可删掉这段代码,jquery可在百度找到下载)。

 

4.保存修改并把页面上传到服务器,大功告成!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: