手风琴效果很流行,可以任意展开收缩内容,甚是好看。
特效要求
鼠标移动到图片上,当前图片放大,其他图片收缩。
HTML
<div class="pics">
<ul id="picList">
<li><a href="#"><img src="images/pic1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/pic2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/pic3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/pic4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/pic5.jpg" alt=""></a></li>
</ul>
</div>
CSS
*{
margin: 0;
padding: 0;
}
ul,li,ol{
list-style: none;
}
img{
border:none;
}
/* 公用css 结束 */
.pics{
width: 1000px; /* 1个 600px,4个 100px*/
margin-left: auto;
margin-right: auto;
height: 400px;
overflow: hidden;
}
.pics ul{
display: flex; /* flex 布局让 li 横向排列 */
justify-content: space-between; /* 内容靠向两端 */
}
.pics ul li{
width: 100px;
height: 400px;
position: relative;
overflow: hidden;
transition:all 0.4s; /* 过渡动画 */
flex-grow: 1; /* 让 li 始终能占满整个 ul ,保证变化过程中 li 之间没有缝隙 */
}
.pics ul li img{
position: absolute; /* 确保图片在 li 里显示中间部分 */
left:50%;
top:0;
margin-left: -300px;
}
.pics ul li.active{ /* 有类 active li 宽度为 600px。去掉,就会恢复 100px */
width: 600px;
}
几个细节需要注意:
- li 的变宽,变窄动画,全靠 CSS3 的 transition 完成
- 为了防止 li 变化过程中 li 之间产生缝隙,li 添加了样式:
flex-grow: 1;
让 li 自动塞满 ul 。
3. 为了让图片在 li 中始终居中,对图片运用了绝对定位。li 则是相对定位。
.pics ul li img{
position: absolute;
left:50%;
top:0;
margin-left: -300px;
}
JavaScript
let ul = document.getElementById("picList");
let lies = ul.children ;
// 第一个 li 变宽:增加类 active
lies[0].classList.add("active");
// 查找兄弟标签函数
let findSiblings = function(tag){
let parent = tag.parentNode ;
let child = parent.children ;
let sb = [];
for(let i = 0 ; i <= child.length-1 ; i++ ){
if( tag !== child[i]){
sb.push( child[i]);
}
}
return sb ;
};
for( let i = 0 ; i <= lies.length-1 ; i++ ){
lies[i].addEventListener("mouseenter",function(){
let siblings = findSiblings(this);
// 当前标签变宽: 增加类 active
this.classList.add("active");
// 兄弟标签变窄
for(let k = 0 ; k <= siblings.length-1 ; k++ ){
// 兄弟标签去掉 active
siblings[k].classList.remove("active");
}
});
}
完工~!!