jQuery右侧悬浮固定客服特效代码下载

jQuery右侧悬浮固定客服特效代码下载

1. 引入JS

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

2. HTML代码

<div style="height:2000px;"></div>
<!--右侧悬浮菜单-->
<div class="slide">
	<ul class="icon">
		<li class="up" title="上一页"></li>
		<li class="qq"></li>
		<li class="tel"></li>
		<li class="wx"></li>
		<li class="down" title="下一页"></li>
	</ul>
	<ul class="info">
		<li class="qq">
			<p>在线沟通,请点我<a href="https://www.51qianduan.com/">51前端</a></p>
		</li>
		<li class="tel">
			<p>咨询热线:<br>400-800-8888<br>客服qq:<br>123456789</p>
		</li>
		<li class="wx">
			<div class="img"><img src="img/1441956938.png" /></div>
		</li>
	</ul>
</div>
<div id="btn" class="index_cy"></div>
<script type="text/javascript">
$(function(){
	$('.slide .icon li').not('.up,.down').mouseenter(function(){
		$('.slide .info').addClass('hover');
		$('.slide .info li').hide();
		$('.slide .info li.'+$(this).attr('class')).show();//.slide .info li.qq
	});
	$('.slide').mouseleave(function(){
		$('.slide .info').removeClass('hover');
	});
	$('#btn').click(function(){
		$('.slide').toggle();
		if($(this).hasClass('index_cy')){
			$(this).removeClass('index_cy');
			$(this).addClass('index_cy2');
		}else{
			$(this).removeClass('index_cy2');
			$(this).addClass('index_cy');
		}
	});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到