jquery+css小案例:实现手风琴效果

5 篇文章 0 订阅
2 篇文章 0 订阅

分享两种jquery实现是风琴效果示例。


先看效果图:
状态一

这里写图片描述


下面开始写代码:
其实整个思路很简单,就是当鼠标移在当前块上的时候,当前图片完全显示,其他图片只显示一部分宽度。


html代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/demo10.css" />
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/demo10.js" ></script>
	</head>
	<body>
		<div id="igs">
			<div class="ig ig1">
				<div class="txt">
					<p class="p1">成都</p>
					<p class="p2"><a href="https://baike.baidu.com/item/%E6%88%90%E9%83%BD/128473?fr=aladdin">美食之城</a></p>
				</div>
			</div>
			<div class="ig ig2">
				<div class="txt">
					<p class="p1">丽江</p>
					<p class="p2"><a href="https://baike.baidu.com/item/%E4%B8%BD%E6%B1%9F/121726">魅力之城</a></p>
				</div>
			</div>
			<div class="ig ig3">
				<div class="txt">
					<p class="p1">拉萨</p>
					<p class="p2"><a href="https://baike.baidu.com/item/%E6%8B%89%E8%90%A8/104792?fr=aladdin">日光城</a></p>
				</div>
			</div>
			<div class="ig ig4">
				<div class="txt">
					<p class="p1">武汉</p>
					<p class="p2"><a href="https://baike.baidu.com/item/%E6%AD%A6%E6%B1%89/106764?fr=aladdin">江城</a></p>
				</div>
			</div>
		</div>
	</body>
</html>


css代码:

*{
	padding: 0;
	margin: 0;
	font-family: "微软雅黑";
}

#igs{
	width: 1100px;
	height: 400px;
}
.ig{
	width: 100px;
	height: 400px;
	float: left;
}
.ig4{
	width: 780px;
}
.ig1{
	background: url(../img/pic1.png);
}
.ig2{
	background: url(../img/pic2.png);
}
.ig3{
	background: url(../img/pic3.png);
}
.ig4{
	background: url(../img/pic4.png);
}
.txt{
	width: 100px;
	height: 400px;

	background: rgba(0,0,0,0.5);
}
.txt p{
	width: 14px;
	font-size: 14px;
	color: white;
	float: left;
	margin-top: 30px;
	margin-left: 20px;
}

.txt a{
	color: white;
	text-decoration: none;
}
.txt a:hover{
	color: cornflowerblue;
}
.txt .p1{
	color: greenyellow;
	text-shadow: 5px 5px 5px #CCCCCC;
}


JavaScript代码——这里有两种写法:

第一种(这种可能比较好理解):

$(function(){
	$(".txt").mousemove(function(){//鼠标经过
		$(this).parent().stop(true).animate({"width":"780px"},1000);//当前图片的宽度显示为全部
		$(this).parent().siblings().stop(true).animate({"width":"100px"},1000);//其他图片宽变小
	});
});
 

第二种(在理解了第一种的前提下,再看这段代码会觉得很好理解。)

$(function(){
	$(".txt").mousemove(function(){
	$(this).parent().stop(true).animate({"width":"780px"},1000).siblings().stop(true)
	.animate({"width":"100px"},1000);
	});
});

大家有疑问的地方欢迎交流呀。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值