Heim >Web-Frontend >js-Tutorial >Wie kann ich das Online-Kundendienstlogo mit js auf einer Seite der Seite reparieren? (Code tatsächlicher Test)

Wie kann ich das Online-Kundendienstlogo mit js auf einer Seite der Seite reparieren? (Code tatsächlicher Test)

藏色散人Original: 2018-08-10 15:42:051977Durchsuche

Wenn wir beim Durchsuchen relevanter Wissenswebsites Zweifel am Inhalt der Website haben, entscheiden wir uns normalerweise dafür, mit dem Online-Kundendienst zu kommunizieren. Dies spart nicht nur gegenseitig Zeit, sondern bringt auch eine hohe Effizienz für beide Parteien. Wie wird also dieses feste Online-Kundenservice-Logo auf der Seite implementiert? In diesem Artikel werden Ihnen die Details des festen Online-Kundendienst-JS-Codes vorgestellt, dh des JS-QQ-Online-Kundendienstcodes.

Das spezifische Beispiel für den Online-Kundendienst-JS-Code lautet wie folgt:

<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>

Der Testeffekt des obigen Codes ist wie folgt:

Wie kann ich das Online-Kundendienstlogo mit js auf einer Seite der Seite reparieren? (Code tatsächlicher Test)

Dieser Artikel stellt hauptsächlich js vor, um den einfachen QQ-Online-Kundendienstcode zu realisieren, der auf der rechten Seite der Webseite schwimmt, sowie die Auswirkungen der Telefonnummern- und QR-Code-Anzeige. Es verwendet einfache benutzerdefinierte Funktionen zur Steuerung der Anzeige- und Ausblendeffekte von Kundendienstbildern. Freunde in Not können darauf zurückgreifen.

[Empfehlungen zu verwandten Inhalten]

Beispielfreigabe für den Wangwang-Kundenservice-Codegenerator

Online-Download des Kundendienstsystems

jQuery implementiert Online-Kundenservice

jQuery dynamischen Online-Kundenservice

Das obige ist der detaillierte Inhalt vonWie kann ich das Online-Kundendienstlogo mit js auf einer Seite der Seite reparieren? (Code tatsächlicher Test). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie kann man dafür sorgen, dass Bilder frei auf einer Webseite schweben? (JS-Codebeispiel)Nächster Artikel：Wie kann man dafür sorgen, dass Bilder frei auf einer Webseite schweben? (JS-Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen