css动画右往左显示侧边小提示会话隐藏兼容ie8

最新推荐文章于 2023-09-20 08:52:36 发布

说学逗唱攻城狮

最新推荐文章于 2023-09-20 08:52:36 发布

阅读量263

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_34720531/article/details/89330807

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE >
<html>
  <head>
    <title>侧边信息隐藏</title>
   	<meta charset="utf-8" />
   	
   	<style>
			.div-fixed,
			.div-look-btn,
			.div-content {
				height: 550px;
			}
			.div-fixed {
				position: fixed;
				bottom: 20px;
				right: -130px;
				width: 160px;
				cursor: pointer;
			}
			/* ie 兼容 position: fixed; */
			.div-ie	{   
			  _position: absolute;  
			  _clear: both;
			  _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) - 1 : document.body.scrollTop + (document.body.clientHeight-this.clientHeight) - 1);
			}
			.div-look-btn {
				position: absolute;
			    top: 20%;
		    	height: 100px;
				display: inline-block;
				padding-top: 10px;
				width: 30px;
		   		font-size: 14px;
    			letter-spacing: 2px;
				background: #076ce0;
				text-align: center;
				color: #fff;
				border-top-left-radius: 4px;
				border-bottom-left-radius: 4px;
				-ms-border-top-left-radius: 4px;
				-ms-border-bottom-left-radius: 4px;
		    	line-height: 22px;
			}
			
			.div-look-btn>img {
				display: inline-block;
				position: relative;
				top: 40%;
				width: 32px;
				height: 32px;
			}
			.div-content {
				display: inline-block;
				float: right;
				width: 130px;
				background: #fff;
				text-align: center;
				border: 1px solid #eee;
			}
			.div-content-code {
				margin-top: 20px;
			}
			.div-font {
				display: block;
				font-size: 14px; 
				margin-bottom: 5px;
				font-weight: 550;
			}
			.div-img {
				width: 110px; 
				height: 110px;
			}
			.div-btn {
				display: block;
				padding: 2px 10px;
				border-radius: 2px;
				border: none;
				color: #fff;
				font-size: 14px;
				margin-top: 5px;
				width: 70%;
				margin-left: 9%;
			}
			.btn-ios {
				background: #19b4ed;
			} 
			.btn-android {
				background: #F0AD4E;
			}
			.btn-download {
				background: rgb(34, 181, 115);
				
			}
  	</style>
   	
</head>
<body>
	
  <div class="div-fixed div-ie">
  	
  	<div class="div-look-btn">
  		<!--<img src="img/btn.jpg" />-->
  		<span>扫码查看</span>
  	</div>
  	
  	<div class="div-content">
  		
  		<div class="div-content-code">
  			<span class="div-font">网速测试助手</span>
  			<a class="div-btn btn-download">立即下载</a>
  		</div>
  		
  		<div class="div-content-code">
  			<span class="div-font">移动运维门户MOP</span>
  			<a class="div-btn btn-download">立即下载</a>
  		</div>
  		
  		<div class="div-content-code">
  			<span class="div-font">服保运维客户端</span>
  			<img src="img/xiazaidizhi.png" class="div-img" />
  			<a class="div-btn btn-ios">ios</a>
  			<a class="div-btn btn-android">android</a>
  		</div>
  		
  		<div class="div-content-code">
  			<span class="div-font">服保智慧营维</span>
  			<img src="img/zhywqrcode.png" class="div-img" />
  			<a class="div-btn btn-download">立即下载</a>
  		</div>
  		
  	</div>
  </div>
  
  
  <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
  <script>
  	$(function(){
  		
  		$('.div-fixed').hover(function(){
  			// stop(true)，此时程序会把当前元素接下来尚未执行完的动画队列清空。所以可以把上面代码改成如此代码，就能实现预期的效果。
  			$(this).stop(true).animate({'right': '0'}, 'slow');
  		}, function(){
  			$(this).stop(true).animate({'right': '-130px'}, 'slow');
  		});
  		
  	});
  	
  </script>
</body>
</html>