CSS3滑入/滑出效果

最新推荐文章于 2024-05-06 13:10:01 发布

kingwin28

最新推荐文章于 2024-05-06 13:10:01 发布

阅读量636

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/kingwin28/article/details/129078454

版权

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>trans</title> 
    <style> 
        #volet_clos {position: fixed;top: 0px; left: 0;width: 100%;}
        #volet {width: 250px;padding: 10px;background: #6B9A49; color: #fff;width: 100%;}        
        #volet {position: absolute;left: 0px; transition: all .5s ease-in;}
        #volet a.ouvrir {position: absolute;right: calc(40%); top:0px; padding: 10px 25px; background: #555; color: #fff; text-decoration: none;text-align: center; width: 120px;} 
    </style>
	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
	<h1>CSS3滑入/滑出效果</h1>
	<a href="#volet" class="ouvrir">滑出</a>
	<div id="volet_clos">
		<div id="volet">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quisquam tempora quaerat dolores molestias reiciendis .</p>
			<p>vero labore voluptates necessitatibus ut? Et</p>
			<p>vero labore voluptates necessitatibus ut? Et</p>
			<p>vero labore voluptates necessitatibus ut? Et</p>
			<p>vero labore voluptates necessitatibus ut? Et</p>

			<a href="#volet" class="ouvrir">滑出</a>
		</div>
	</div> 
</body>
<script>
    var cH = document.documentElement.clientHeight;
    
	 $('.ouvrir').click(function(e){
		var vH = $('#volet').height(); 
	    var aD =  $('.ouvrir').text();
		if(aD.indexOf('滑出')>-1){
			$('#volet').css({ top: (cH - vH - 20) });
			$('.ouvrir').text('滑入');
		}else{
			$('#volet').css({ top: cH  });
			$('.ouvrir').text('滑出');
		}
	 })

	$(function(){
		// 默认定位
		$('#volet').css({ top: cH  });
	});

</script>
</html>