分享两种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);
});
});
大家有疑问的地方欢迎交流呀。