求网站jq右侧客服悬浮窗代码

JavaScript07

求网站jq右侧客服悬浮窗代码,第1张

<body>

<div style="height:10000px"></div>

<div class="suspension">

<div class="suspension-box">

<a href="#" class="a a-service "><i class="i"></i></a>

<a href="javascript:" class="a a-service-phone "><i class="i"></i></a>

<a href="javascript:" class="a a-qrcode"><i class="i"></i></a>

<a href="#" class="a a-cart"><i class="i"></i></a>

<a href="javascript:" class="a a-top"><i class="i"></i></a>

<div class="d d-service">

<i class="arrow"></i>

<div class="inner-box">

<div class="d-service-item clearfix">

<a href="#" class="clearfix"><span class="circle"><i class="i-qq"></i></span><h3>咨询在线客服</h3></a>

</div>

</div>

</div>

<div class="d d-service-phone">

<i class="arrow"></i>

<div class="inner-box">

<div class="d-service-item clearfix">

<span class="circle"><i class="i-tel"></i></span>

<div class="text">

<p>服务热线</p>

<p class="red number">4001-123-456</p>

</div>

</div>

<div class="d-service-intro clearfix">

<p><i></i>功能和特性</p>

<p><i></i>价格和优惠</p>

<p><i></i>获取内部资料</p>

</div>

</div>

</div>

<div class="d d-qrcode">

<i class="arrow"></i>

<div class="inner-box">

<div class="qrcode-img"><img src="images/side_ewm.jpg" alt=""></div>

<p>微信服务号</p>

</div>

</div>

</div>

</div>

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

<script type="text/javascript">

$(document).ready(function(){

/* ----- 侧边悬浮 ---- */

$(document).on("mouseenter", ".suspension .a", function(){

var _this = $(this)

var s = $(".suspension")

var isService = _this.hasClass("a-service")

var isServicePhone = _this.hasClass("a-service-phone")

var isQrcode = _this.hasClass("a-qrcode")

if(isService){ s.find(".d-service").show().siblings(".d").hide()}

if(isServicePhone){ s.find(".d-service-phone").show().siblings(".d").hide()}

if(isQrcode){ s.find(".d-qrcode").show().siblings(".d").hide()}

})

$(document).on("mouseleave", ".suspension, .suspension .a-top", function(){

$(".suspension").find(".d").hide()

})

$(document).on("mouseenter", ".suspension .a-top", function(){

$(".suspension").find(".d").hide()

})

$(document).on("click", ".suspension .a-top", function(){

$("html,body").animate({scrollTop: 0})

})

$(window).scroll(function(){

var st = $(document).scrollTop()

var $top = $(".suspension .a-top")

if(st >400){

$top.css({display: 'block'})

}else{

if ($top.is(":visible")) {

$top.hide()

}

}

})

})

</script>

</body>

这种是通过js技术来实现的，JavaScript和vbscript都可以实现。

你可以搜索"js网页漂浮qq"或者是"漂浮qq代码"，都可以找到！然后在源代码里对界面风格作一个修改，把图片上传服务器就可以了。

如果你对代码不熟悉的话还有另外一种渠道就是使用现在网上比较流行的网站客服系统，不需要代码操作，直接去网站申请，然后将js代码加入网站底部，界面什么的可以通过后台设置，不需要操作代码。推荐使用53kf在线客服系统