JS实现手风琴特效

2017-03-21 09:49 阅读 100 次 JS实现手风琴特效已关闭评论

手风琴特效,一个应用非常广泛的特效,看起来非常的炫酷,很多大型的网站都会用到此特效,今天咱们就来研究下这个手风琴特效是一个怎么回事。(此文章中只讨论,只讨论原生JS,JQuery不在范围之内,博主也建议各位,能用JS实现的特效绝对不用JQuery,项目要求除外)
手风琴特效
实现原理:
手风琴的原理其实很简单,通过观察上图可以看到,就是点击的时候每一项相应的展开,其他项全部关闭,这就是手风琴。其实咱们不难看出,这是不是有点类型与选项卡功能啊,也是点击一个显示当前项啊,其他的都隐藏。其实吧,原理很接近,甚至可以说一样的,我们都可以看做是当鼠标点击的时候显示当前项样式,其他项不显示,那咱们是不是可以认为的给当前项添加一个class,class中的样式是显示的,然后通过JS去切换class?
对了,完全可以。接下来咱们看代码。

提示:你可以先修改部分代码再运行。

仔细看,咱们是不是添加了一个big的class,然后通过JS去切换这个class,很简单吧。小伙伴们赶快动手试试看吧!此JS代码可以实现选项卡切换哦,html布局都差不多类型。

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!技术交流群:571218744(群主不定时分享教程哦!)
转载请注明:JS实现手风琴特效 | 第九个码农博客
做博客不容易,各位看官,看完麻烦花一秒钟点击下广告,谢谢各位了!

评论已关闭!