在页面中固定一侧的在线客服标志怎么用js实现？（代码实测）-js教程-PHP中文网

首页

web前端

js教程

在页面中固定一侧的在线客服标志怎么用js实现？（代码实测）

藏色散人

Aug 10, 2018 pm 03:42 PM

在我们浏览相关知识网站时，如果对网站内容有所疑惑通常会选择和在线客服沟通。这样不仅节约了彼此时间，也能为双方带来高效率。那么这种在页面中存在固定的在线客服标识是如何去实现的呢？本篇文章就给大家介绍固定在线客服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: &#39;block&#39;});    
		}else{    
			if ($top.is(":visible")) {    
				$top.hide();    
			}    
		}    
	});    
});	
    
</script>        
</body>

登录后复制

以上代码测试效果如下图：

本篇文章主要介绍了js实现浮动在网页右侧的简洁qq在线客服代码以及电话、二维码显示等效果,通过简单的自定义函数控制客服图片的显示与隐藏效果,需要的朋友可以参考下。

【相关内容推荐】

以上是在页面中固定一侧的在线客服标志怎么用js实现？（代码实测）的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7569

CakePHP 教程

1386

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

107

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

谁得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？ Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中？在处理数据时，我们常常会遇到需要将具有相同ID�...

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。

console.log输出结果差异：两次调用为何不同？ Apr 04, 2025 pm 05:12 PM

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异，并解释其背后的原因。�...

如何实现视差滚动和元素动画效果，像资生堂官网那样？或者：怎样才能像资生堂官网一样，实现页面滚动伴随的动画效果？ Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网（https://www.shiseido.co.jp/sb/wonderland/）中�...

初学者的打字稿，第2部分：基本数据类型 Mar 19, 2025 am 09:10 AM

掌握了入门级TypeScript教程后，您应该能够在支持TypeScript的IDE中编写自己的代码，并将其编译成JavaScript。本教程将深入探讨TypeScript中各种数据类型。 JavaScript拥有七种数据类型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。TypeScript在此基础上定义了更多类型，本教程将详细介绍所有这些类型。 Null数据类型与JavaScript一样，TypeScript中的null

PowerPoint可以运行JavaScript吗？ Apr 01, 2025 pm 05:17 PM

在PowerPoint中可以运行JavaScript，通过VBA调用外部JavaScript文件或嵌入HTML文件来实现。1.使用VBA调用JavaScript文件，需启用宏并具备VBA编程知识。2.嵌入包含JavaScript的HTML文件，简单易行但受安全限制。优点包括扩展功能和灵活性，劣势涉及安全性、兼容性和复杂性，实际应用需注意安全性、兼容性、性能和用户体验。

See all articles

在页面中固定一侧的在线客服标志怎么用js实现？（代码实测）

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题