右侧滑动出现导航条 

<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<!--jquery-->
	<script type="text/javascript" language="javascript" src="http://gz.jgyljt.com/jgswt/js/jquery.js"></script>
	<script>
		$(function() {
			// 悬浮窗口
			$(".yb_conct").hover(function() {
				$(".yb_conct").css("right", "5px");
				$(".yb_bar .yb_ercode").css('height', '200px');
			}, function() {
				$(".yb_conct").css("right", "-127px");
				$(".yb_bar .yb_ercode").css('height', '53px');
			});
			// 返回顶部
			$(".yb_top").click(function() {
				$("html,body").animate({
					'scrollTop': '0px'
				}, 300)
			});
		});
	</script>
	<style>
		/*固定的悬浮窗*/
		.yb_conct{position:fixed;z-index:9999999;top:200px;right:-127px;cursor:pointer;transition:all .3s ease;}
		.yb_bar ul li{width:180px;height:53px;font:16px/53px 'Microsoft YaHei';color:#fff;text-indent:54px;margin-bottom:3px;border-radius:3px;transition:all .5s ease;overflow:hidden;}
		.yb_bar .yb_top{background:#333333 url(http://gz.jgyljt.com/jgswt/img/bdjgAddon/yhPc_right.png) no-repeat 0 0;}
		.yb_bar .yb_phone{background:#00ccff url(http://gz.jgyljt.com/jgswt/img/bdjgAddon/yhPc_right.png) no-repeat 0 -57px;}
		.yb_bar .yb_sq{text-indent:0;background:#ff6600 url(http://gz.jgyljt.com/jgswt/img/bdjgAddon/yhPc_right.png) no-repeat 0 -113px;}
		.yb_bar .yb_qq{text-indent:0;background:#ff0033 url(http://gz.jgyljt.com/jgswt/img/bdjgAddon/yhPc_right.png) no-repeat 0 -170px;}
		.yb_bar .yb_weibo{text-indent:0;background:#ffcc00 url(http://gz.jgyljt.com/jgswt/img/bdjgAddon/yhPc_right.png) no-repeat 0 -226px;}
		.yb_bar .yb_ercode{background:#66cc33 url(http://gz.jgyljt.com/jgswt/img/bdjgAddon/yhPc_right.png) no-repeat 0 -283px;}
		.hd_qr{padding:0 29px 25px 29px;}
		.yb_weibo a{display:block;text-indent:54px;width:100%;height:100%;color:#ffffff;}
		.yb_sq a{display:block;text-indent:54px;width:100%;height:100%;color:#ffffff;}
		.yb_qq a{display:block;text-indent:54px;width:100%;height:100%;color:#ffffff;}
	</style>
	<!--右侧客服-->
</head>

<body>

	<!--右侧客服-->
	<div class="yb_conct">
		<div class="yb_bar">
			<ul>
				<li class="yb_top" style="color:#ffffff;">返回顶部</li>
				<li class="yb_phone" style="color:#ffffff;">0797-8399022</li>
				<li class="yb_sq">
					<a target="_blank" href="http://p.qiao.baidu.com/cps/chat?siteId=11942880&userId=25443022" title="在线咨询">在线咨询</a>
				</li>
				<li class="yb_qq">
					<a target="_blank" href="tencent://message/?uin=1239886577&Site=163164.cn&Menu=yes" title="在线咨询">QQ&nbsp;咨询</a>
				</li>
				<li class="yb_weibo">
					<a target="_blank" href="https://weibo.com/u/5607907845" title="在线咨询">新浪微博</a>
				</li>
				<li class="yb_ercode">微信客服<br><img class="hd_qr" src="http://gz.jgyljt.com/jgswt/img/bdjgAddon/yhPc_ewm.jpg" style="width:120px; height:120px;"></li>
			</ul>
		</div>
	</div>
	<!--右侧客服-->
</body>

</html>
posted @ 2018-07-27 11:27  blue星期天  阅读(384)  评论(0)  编辑  收藏  举报