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

原创 2017年01月03日 16:57:03

一定要引入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灰色隐藏,红色出现时:
















版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jQuery中的animate的应用(图片的自动移动)

图片按照数字的顺序移动             img     {         position:absolute;         top:13px;       ...

jQuery从左向右展开DIV(动画效果)

两种方法实现用CSS切割图片只取图片中一部分

http://www.jb51.net/css/150036.html 切割图片这里不是真正的切割,只是用CSS取图片中的一部分而已,主要有两种方式,一是做为某一元素的背景图片,二是...

JQuery 动画显示和隐藏效果

JQuery 动画显示和隐藏效果 /* 1.$("页面元素类型").show(时间, 回调函数);以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数;指定时间后依次执...

jQuery——动画篇(隐藏显示、上卷下拉、淡入淡出、animate、stop、each)

jQuery——动画篇(隐藏显示、上卷下拉、淡入淡出、animate、stop、each 、inArray、get、index)...
  • anfangw
  • anfangw
  • 2016年12月16日 16:47
  • 2430

Jquery 动画效果 左右移动

移动位置的动画 body{fo

带时间的日期选择web控件

1,web控件的样子 2,日期时间选择的使用 3,calendar.js的文件 ...
  • daditao
  • daditao
  • 2013年12月10日 11:12
  • 12774

Visio画UML用例图只需八步轻松实现

本节和大家学习一下如何Visio画UML用例图,UML用例图主要用来图示化系统的主事件流程,它主要用来描述客户的需求,即用户希望系统具备的完成一定功能的动作。 UML用例图简介 首先看一下...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery实现图片左右出现和隐藏动画(腰封)
举报原因:
原因补充:

(最多只允许输入30个字)