• 右侧滑动出现导航条


    <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{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;100%;height:100%;color:#ffffff;}
    		.yb_sq a{display:block;text-indent:54px;100%;height:100%;color:#ffffff;}
    		.yb_qq a{display:block;text-indent:54px;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="120px; height:120px;"></li>
    			</ul>
    		</div>
    	</div>
    	<!--右侧客服-->
    </body>
    
    </html>
  • 相关阅读:
    mybatis映射文件之获取自增的主键
    mybatis映射文件之基本的增删改查
    mybatis之全局配置文件中的标签
    org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.gong.mybatis.dao.EmployeeMapper.getEmpById
    mybatis之第一个mybatis程序(二)
    mybatis之第一个mybatis程序(一)
    mybatis之在eclipase中的mybatis配置文件中按下"alt+/"提示相应的标签
    springmvc之与spring进行整合
    使用 JAVA 中的动态代理实现数据库连接池
    ThreadLocal源代码分析
  • 原文地址:https://www.cnblogs.com/1666818961-lxj/p/9376581.html
Copyright © 2020-2023  润新知