Maison >interface Web >js tutoriel >Comment corriger le logo du service client en ligne sur un côté de la page en utilisant js ? (Code test réel)

Comment corriger le logo du service client en ligne sur un côté de la page en utilisant js ? (Code test réel)

藏色散人original: 2018-08-10 15:42:051979parcourir

Lorsque nous parcourons des sites Web de connaissances pertinents, si nous avons des doutes sur le contenu du site Web, nous choisissons généralement de communiquer avec le service client en ligne. Cela permet non seulement à chacun de gagner du temps, mais apporte également une grande efficacité aux deux parties. Alors, comment ce logo fixe du service client en ligne sur la page est-il mis en œuvre ? Cet article vous présentera les détails du code js du service client en ligne fixe, c'est-à-dire le code du service client en ligne js qq.

L'exemple spécifique du code js du service client en ligne est le suivant :

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

L'effet de test du code ci-dessus est le suivant :

Comment corriger le logo du service client en ligne sur un côté de la page en utilisant js ? (Code test réel)

Cet article présente principalement l'implémentation JS du code simple du service client en ligne QQ flottant sur le côté droit de la page Web, ainsi que les effets de l'affichage du numéro de téléphone et du code QR qu'il utilise. des fonctions personnalisées simples pour contrôler l'affichage et les effets de masquage des images du service client. Les amis dans le besoin peuvent se référer à Down.

[Recommandations de contenu associé]

Partage d'exemples de générateur de code de service client Wangwang

Téléchargement du système de service client en ligne

jQuery met en œuvre un service client en ligne

service client en ligne dynamique jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment faire en sorte que les images semblent flotter librement sur une page Web ? (exemple de code js)Article suivant：Comment faire en sorte que les images semblent flotter librement sur une page Web ? (exemple de code js)

Articles Liés

Voir plus