JQ实现手风琴特效

自己写的第一个博客,也是把我看来的学到的整理一下,不会玩这个博客,废话不多说,今天分享的是一个手风琴特效`


这是div部分代码 很基本的,这里引入了四张图片


<div id="wrap">
	<ul>
		<li style="background-image:url(img/1.jpg)">
			<div class='txt'>
				<p>哈哈哈哈哈哈哈</p>
			</div>
		</li>
		<li style="background-image:url(img/2.jpg)">
			<div class='txt'>
				<p>哈哈哈哈哈哈哈</p>
			</div>
		</li>
		<li style="background-image:url(img/3.jpg)">
			<div class='txt'>
				<p>哈哈哈哈哈哈哈</p>
			</div>
		</li>
		<li style="background-image:url(img/4.jpg); width:789px;">
			<div class='txt'>
				<p>哈哈哈哈哈哈哈</p>
			</div>
		</li>
	</ul>
</div>


接下来是CSS

*{ margin:0; padding:0;}
body{
	background:url(img/bg.jpg) center top no-repeat;;
}
#wrap{
	width:1090px;
	height:429px;
	margin:160px auto;
	overflow:hidden;
}
#wrap ul{
	width:120%;
}
#wrap ul li{
	list-style:none;
	width:100px;
	height:429px;
	float:left;
}
#wrap ul li .txt{
	width:100px;
	height:429px;
	background:rgba(0,0,0,.5);
	overflow:hidden;
}
#wrap ul li .txt p{
	padding:0px 42px;
	background:rgba(0,0,0,.5);
	color:#fff;
	font-family:'Microsoft yahei';
	font-size:14px;
}


接下来JQ代码,很简洁通过hover,覆盖到的对象让他图片的大小恢复原样,其他图片则100px

	$('#wrap ul li').hover(function(){
				$(this).stop().animate({
					width : '789px'
				},500).siblings().stop().animate({
					width : '100px'
				},500);
			});




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值