手风琴效果很流行，可以任意展开收缩内容，甚是好看。

特效要求

鼠标移动到图片上，当前图片放大，其他图片收缩。

HTML

<div class="pics"><ul id="picList"><li><a href="#"><img src="data:images/pic1.jpg" alt=""></a></li><li><a href="#"><img src="data:images/pic2.jpg" alt=""></a></li><li><a href="#"><img src="data:images/pic3.jpg" alt=""></a></li><li><a href="#"><img src="data:images/pic4.jpg" alt=""></a></li><li><a href="#"><img src="data: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);// 当前标签变宽: 增加类 activethis.classList.add("active");// 兄弟标签变窄for(let k = 0 ; k <= siblings.length-1 ; k++ ){// 兄弟标签去掉 activesiblings[k].classList.remove("active");}});
}

完工~！！

JavaScript 练手小案例：超级简单又炫酷的图片手风琴效果相关推荐

android 图片闪电效果图,Android超简单实现炫酷的图片展示效果
目录目录效果展示实现原理这里的实现原理很简单,就是添加多个矩形路径,并不断的延长各个矩形路径的宽度(通过onDraw方法的递归实现),然后在矩形路径中绘制Bitmap即可. 实现步骤 1. 构 ...
click 点击图片不起作用_JavaScript 练手小案例：基于SVG的图片切换效果
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...
超详细JavaScript入门基础+练手小案例
目录一.什么是JavaScript 二.使用方法 1.元素绑定事件 2.文档内嵌 3.外部链接三.JavaScript输出语句四.语法规则 4.1 输入语句 4.2 变量的定义 4.3 命名规范 ...
Python采集手机4K壁纸，又是一个练手小案例，也不用担心没壁纸换咯
前言又是一篇采集壁纸的文章,只不过这次是一个新的网站里面也有电脑桌面壁纸,只不过今天先来采集一些手机壁纸吧又是一个练手的小案例,还能保存很多壁纸,不用担心没得壁纸换咯一. 数据来源分析明确需 ...
JavaScript 练手小技巧：animationend 事件及其应用小案例
animationend 事件在 CSS 动画完成后触发. CSS 动画播放时,会发生以下三个事件: animationstart - CSS 动画开始后触发 animationiteration - ...
JavaScript 练手小技巧：页面高亮操作提示和蒙板
在页面上,有时候会遇到操作提示,如下图所示. 可以很直观的告诉用户,关键的操作在哪里,有什么做作用. 需要说明的是,被高亮的部分,并不是目标的真实标签,而是用的其他标签模拟的. 真实的标签被 mask ...
SpringBoot练手小案例-社区管理系统
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 SpringBoot-社区管理系统一.需求分析二.功能分析三.开发流程 1.创建数据库 2.导入依赖 3.创建必要的包 4.根据 ...
Javascript 练手小实验：秒表计时游戏
文章目录一.说明二.效果展示三.代码 3.1 HTML 3.2 CSS 3.3 Javascript 一.说明本游戏页面设计分为左右两栏.左上为跑马灯,左下为计时器和"STAR ...
JavaScript 练手小技巧：#RRGGBB 和 rgb(255,255,255）颜色代码相互转换
看到有人在 CSDN 上写颜色的转换代码,突发奇想,用 JavaScript 也写一个. 一.相关知识点 (1)常用颜色代码方式,有两种 #RRGGBB 和 rgb(255,255,255) 用 #R ...

JavaScript 练手小案例：超级简单又炫酷的图片手风琴效果

特效要求

HTML

CSS

JavaScript

JavaScript 练手小案例：超级简单又炫酷的图片手风琴效果相关推荐

最新文章

热门文章