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操作div隐藏和显示的4种动画

不多说直接上代码,效果如下: Jquery-Div动画显示 ...
  • projectNo
  • projectNo
  • 2017年10月25日 18:12
  • 291

JQuery 动画显示和隐藏效果

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

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

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

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

  • huang100qi
  • huang100qi
  • 2010年09月27日 16:33
  • 12250

jQuery源码解析(5)—— Animation动画

闲话 jQuery的动画机制有800行, 虽然不如样式的1300行,难度上却是不减。由于事前不了解animate接口的细节使用规则,看代码期间吃了很多苦头,尤其是深恶痛绝的defaultPref...
  • vbdfforever
  • vbdfforever
  • 2016年04月11日 13:32
  • 5605

Jquery在元素处弹出带动画的层

Jquery在某个元素位置处弹出带动画了层。 本案例中鼠标停留在button上,在button上方或者下方弹出带动画的层。获取某个元素在页面中的位置。 注意:在没有滚动条的时候,这里获取位置正确的,有...
  • lovegonghui
  • lovegonghui
  • 2015年11月10日 10:01
  • 632

jQuery图片显示消失和切换

html> html lang="en"> head> meta charset="UTF-8"> title>title> style> #box{ ...
  • wfh_fighting
  • wfh_fighting
  • 2016年11月02日 21:24
  • 639

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

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

js点击弹出左侧隐藏菜单

效果如图所示: 展开前: 展开后: 原理是通过设置左侧margin来控制菜单的显示隐藏 源码: SlideBar #menuBar {...
  • WeLoveSunFlower
  • WeLoveSunFlower
  • 2014年07月07日 15:14
  • 2449

javascript实现文字隐藏 展开收起

>  html xmlns="http://www.w3.org/1999/xhtml">  head>  meta http-equiv="Content-Type" content="text/h...
  • u010784570
  • u010784570
  • 2014年06月25日 15:32
  • 3550
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery实现图片左右出现和隐藏动画(腰封)
举报原因:
原因补充:

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