zoukankan      html  css  js  c++  java
  • 右侧滑动出现导航条

    <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>
  • 相关阅读:
    SQL SERVER常用函数
    SQL SERVER系统表
    How do I implement a cancelable event?
    sql之left join、right join、inner join的区别
    inno setup脚本,涵盖了自定义安装界面,调用dll等等应用
    MS SQL SERVER 数据库日志压缩方法与代码
    SQLSERVER:计算数据库中各个表的数据量和每行记录所占用空间
    mysql记录执行的SQL语句
    powershell 激活WIN10
    jfinal undertow web.xml
  • 原文地址:https://www.cnblogs.com/1666818961-lxj/p/9376581.html
Copyright © 2011-2022 走看看