jQuery实现的网页左侧在线客服效果代码

发布网友发布时间：2022-04-21 05:56

共2个回答

懂视网时间：2022-04-22 20:07

在我们浏览相关知识网站时，如果对网站内容有所疑惑通常会选择和在线客服沟通。这样不仅节约了彼此时间，也能为双方带来高效率。那么这种在页面中存在固定的在线客服标识是如何去实现的呢？本篇文章就给大家介绍固定在线客服js代码即js qq在线客服代码的详细情况。

在线客服js代码具体示例如下：

<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实现浮动在网页右侧的简洁qq在线客服代码以及电话、二维码显示等效果,通过简单的自定义函数控制客服图片的显示与隐藏效果,需要的朋友可以参考下。

【相关内容推荐】

旺旺客服代码生成器实例分享

在线客服系统下载

jQuery实现在线客服

jquery动感在线客服

热心网友时间：2022-04-22 17:15

本文实例讲述了jQuery实现的网页左侧在线客服效果代码。分享给大家供大家参考，具体如下：
这是又一个网页上的在线客服代码，不错，可以用一下哦。与其它客服不一样的地方呢？无非是在网页左侧滑出，可对客服类型分组，又多了一个功能，哈哈。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-left-online-kf-demo/
具体代码如下：
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网页左侧浮动jquery在线QQ客服代码</title>
<style>
*{margin:0px;padding:0px;outline:none;list-style-type:none;border:none;}
/*
QQbox
*/
.QQbox{z-index:1000;width:410px;left:-276px;top:0;margin:149px
0
0
0;position:fixed;}
*html,
*html
body{background-image:url(about:blank);background-attachment:fixed;}
*html
.QQbox{position:absolute;
top:expression(eval(document.documentElement.scrollTop));}
.QQbox
.press{left:0;border:none;cursor:pointer;width:32px;height:96px;position:absolute;padding-top:140px;}
.QQbox
.Qlist{float:left;width:410px;background:url(images/bj01.png)
no-repeat;background-position:1px
0px;height:436px;display:block;overflow:hidden;zoom:1;}
.QQbox
.Qlist
.infobox{text-align:center;background-repeat:no-repeat;padding:5px;line-height:14px;color:#CCCCCC;font-weight:700;}
.QQbox
.Qlist
.con{margin-top:266px;margin-left:50px;color:#32567e;font-size:14px;}
.QQbox
.Qlist
.con
ul
li{height:31px;list-style:none;margin-left:35px;}
.QQbox
.Qlist
.con
ul
li
a{font-size:13px;margin-left:18px;text-decoration:none;}
.OnlineLeft{float:left;display:inline;width:262px;height:439px;overflow:hidden;zoom:1;}
.OnlineBtn{float:right;display:inline;width:127px;height:36px;background:url(images/bj02.png)
no-repeat;margin-top:-45px;margin-left:220px;}
</style>
<script
type="text/javascript"
src="jquery-1.6.2.min.js"></script>
</head>
<body>
<div
id="divQQbox"
class="QQbox">
<div
id="divOnline"
class="Qlist">
<div
class="OnlineLeft">
<div
class="con">
<ul>
<li>售前咨询<a
target="_blank"
href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0"
src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>网站建设<a
target="_blank"
href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0"
src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>网站优化<a
target="_blank"
href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0"
src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>整合营销<a
target="_blank"
href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0"
src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>售后服务<a
target="_blank"
href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0"
src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
</ul>
</div>
</div>
<div
class="OnlineBtn">
</div>
</div>
</div>
<script
type="text/javascript">
$(function(){
//建站热线展开效果
$("#divQQbox").hover(
function(){
$(this).stop(true,false);
$(this).animate({left:0},300);
},
function(){
$(this).animate({left:-276},149);
}
)
});
</script>
</body>
</html>
希望本文所述对大家jQuery程序设计有所帮助。

全部栏目

jQuery实现的网页左侧在线客服效果代码