【JS特效之手风琴效果】基于jquery实现手风琴网页特效（附源码）

HTML+CSS+JS手风琴效果目录

🍔涉及知识
🥤写在前面
🍧一、网页主题
🌳二、网页效果
🐋三、网页架构与技术
- 3.1 脑海构思
- 3.2 实现原理
🌈四、网页源码
- 4.1 手风琴模块
- 4.2 完整源码获取方式
🌅 作者寄语

🍔涉及知识

Html手风琴效果实现，手风琴网页制作，js特效之手风琴，html+css+js实现手风琴效果，web网页手风琴效果，DIV+CSS网页特效，特效网页效果汇总，手风琴实现原理，期末网页大作业，网页作业成品，web前端源码实例，如何制作网页，网页设计思路，如何从零开始制作web页面。

✨讲专栏✨：web 网页特效
🌝关于我🌝：一个持续输出型博主，爱分享，喜技术，期待关注与交流！
🧡公中号🧡：《IT黄大大》更多分享抢先看；
🌈说主题🌈：学院，非遗类，新闻，家乡，旅游，个人，美食，校园，商城，运动，特效，等
🍗谈技术🍗：HTML+CSS，HTML+CSS+JS，Java+数据库，vue项目，aspx，jsp等
📝讲软件📝：vscode，dreamweaver，hbuilder，sublime text，eclipse，idea，VS等；

声明：原创于博主《IT黄大大》，欢迎大家转载，烦请转前注明出处，感谢大家的支持，更多专栏可关注文尾唯心宫z众号《IT黄大大》

🥤写在前面

有段时间没有更新了，为了保持活跃度，今天继续分享技术文章。前几天有个朋友问我手风琴是什么？页面有没有做过，心想着刚好之前不少粉丝的老师要求要做一个网页必须含有多个js特效，今天我就针对手风琴js特效做一个说明与分享吧，希望通过这篇文章更多的人能够学到手风琴效果的实现原理，同时也希望大家能够从中得到启发，解决自己眼前的作业窘境，当然能够学到知识是最好的，废话也不多说了，我尽量做到定期更新哈，希望大家能持续留意我动态哈！

🍧一、网页主题

本次主要研究的方向是一个js特效相关的，主要针对手风琴的效果来做的，更多的是希望大家能够从这个思路自己去试着实现一下，希望能入大家的法眼，这个也是基于html+css+js开发的手风琴特效，创作不易，有需要源码的可以管住违心宫众号《IT黄大大》回复“L002手风琴”或“手风琴特效”，即可获取源码。
话不多说先看下面的效果图，是不是你们要的风格，希望大家能够喜欢这类风格的哈，有任何宝贵意见都可以留言。

🌳二、网页效果

动态效果如下所示：
在这里插入图片描述

🐋三、网页架构与技术

3.1 脑海构思

要想做好一个页面，首先脑子里面得去有个架构，就好比是庖丁解牛，将架构了然于胸，什么困难都会迎刃而解，在制作这种类似网页作业的时候我们一般都是采用浮动布局的方式来实现的，因为这类静态页面的兼容性要求不高，所以我们要想好大致的框架。
当然本次是针对手风琴特效去做的，这个我是创建了一个盒子，然后盒子里面存放了5个li标签，分别给每个li标签设置等比的宽高，从而形成了一个5等分的页面样式。
声明：原创于博主《IT黄大大》，欢迎大家转载，烦请转前注明出处，感谢大家的支持，更多专栏可灌注文尾唯心宫众号《IT黄大大》

3.2 实现原理

A、批量设置背景图
主要是基于jquery组件来做的，其中div设置好标签，将5张图片分别设置成不同li的背景图，也是基于js来实现的，如下所示分别赋值：
//循环设置背景图

$('li').each(function (k, v) {
//在此处修改url，将图片更改为自己本地的图片
$(v).css('background-image', 'url(images/' + (k + 1) + '.png)');
// $(v).css('background-size', '100% 100%');
})

B、设置鼠标移入移出动态效果
就是当我们鼠标移入之后，我们的每个li标签的宽度应该进行调整，也就是其他的都占100px的宽度，然后鼠标移入的图占比1000px，反正总共也是1400px，通过这种方式实现一个悬浮后浮动的效果，也被称作为“手风琴”效果。
当鼠标移出后我们继续重新赋值为280px等比分，通过这种方式达到不同状态的效果。
//鼠标移入时，对应的图片放大，其他的图片变小

$('ul li').mouseover(function () {
// console.log(this);
$(this).stop().animate({ width: 1000 }).siblings().stop().animate({ width: 100 })
})

//鼠标移出时，恢复

$('ul').mouseout(function () {
$("ul li").stop().animate({ width: 280 });
})

🌈四、网页源码

4.1 手风琴模块

Html
在这里插入图片描述

Css
在这里插入图片描述

4.2 完整源码获取方式

A、灌注违心G宫G众号：《IT黄大大》
B、消息回复【L002手风琴】或【手风琴特效】
C、获取下载路径即可下载，解压即用.

在这里插入图片描述

🌅 作者寄语

如果我的这篇博客对您有帮助、而且您喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！当然如果这个文章对您带来不好的体验还希望能多多包涵，一起学习进步。

【灌住我 | 获取更多源码 | 优质文章】带您学习前端知识、CSS特效、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板等! 「在z公z众z号<IT黄大大>里也会定期分享一些免费好看的html页面，期待您的关注哈」！
声明：原创于博主《IT黄大大》，欢迎大家转载，烦请转前注明出处，感谢大家的支持，更多专栏可灌注文尾唯心宫众号《IT黄大大》
2024年我们一起加油，一起成长，感谢您的支持与谅解！
声明：原创于博主《IT黄大大》，欢迎大家转载，烦请转前注明出处，感谢大家的支持，更多专栏可灌注文尾唯心宫众号《IT黄大大》