关闭

jQuery实现图片左右出现和隐藏动画(腰封)

标签: jquerycsshtml
395人阅读 评论(0) 收藏 举报
分类:

一定要引入jQuery,代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<script src="jquery-1.8.3.min.js"></script>
	<link rel="stylesheet" href="">
	<style>
		.container{//整个容器的样式
		display:block;
		position:fixed;
		z-index: 13;
		}
		.d1{//红色部分的样式
			
			position:fixed;
			z-index:999999;
			overflow:hidden;;
			bottom:50px;
			cursor:pointer;
		}
		.d2{//灰色部分的样式
			position:fixed;
			left:0;
			bottom:0;
			width:100%;
			height:220px;
			z-index:999998;
		}
		#close{//关闭的样式
				display:inline-block;
				position:absolute;
				bottom:160px;
				right:270px;
				width:60px;
				height:55px;
				cursor:pointer;
				font: normal 50px Simsun;
				color: #fff;
		}
	</style>
</head>
<body>
	<div class="container">
		<!--让d1先在左边-150px,其实就等于隐藏-->
		<div class="d1" style="width:150px;height:80px;background-color:red;left:-150px;">15551
		</div>
		<div class="d2" style="width:1903px;height:220px;background-color:grey;left:0px;">
			<a id="close">×</a>
		</div>
	</div>

	<script>
		$(document).ready(function(){
			$("#close").click(function(){
			$(".d2").animate({left:'-1920px'});//让d2左移-1920px,就等于隐藏d2
			$(".d1").animate({display:'block',left:'0px'});//让d1距离左边0px就是等于让d1显示
			});
			$(".d1").click(function(){
		$(".d1").animate({display:'block',left:'-150px'});
		$(".d2").animate({left:'0px',display:'block'});
	});
		});


	</script>
</body>
</html>

红色隐藏,灰色出现时,效果如图所示:


点击x灰色隐藏,红色出现时:
















0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:63730次
    • 积分:1417
    • 等级:
    • 排名:千里之外
    • 原创:79篇
    • 转载:13篇
    • 译文:0篇
    • 评论:23条
    文章分类
    最新评论