jQuery手风琴图片切换
分类:实例代码
jQuery手风琴图片切换属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了简单的手风琴图片切换效果。
当鼠标悬浮和离开,当前图片就会伸缩尺寸。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> * { margin: 0; padding: 0; } .box { width: 1174px; height: 405px; margin: 0 auto; overflow: hidden; } li { float: left; list-style: none; width: 106px; overflow: hidden; height: 405px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function () { $("ul li").mouseover(function () { $(this).stop().animate({ width: 538 }, 500); $(this).siblings().stop().animate({ width: 106 }, 500) }) }) </script> </head> <body> <div class="box"> <ul> <li style="width:538px;"><img src="demo/jQuery/img/a.jpg"></li> <li><img src="demo/jQuery/img/b.jpg"></li> <li><img src="demo/jQuery/img/c.jpg"></li> <li><img src="demo/jQuery/img/d.jpg"></li> <li><img src="demo/jQuery/img/e.jpg"></li> <li><img src="demo/jQuery/img/f.jpg"></li> <li><img src="demo/jQuery/img/g.jpg"></li> </ul> </div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.实现原理:
原理其实非常的简单,就是通过鼠标悬浮来调整当前li元素的宽度和其他li元素的宽度,以此来达到视觉上图片伸缩的效果,所谓的伸缩其实就是设置图片被overflow:hidden尺寸的大小而已。
二.代码注释:
(1).$(function () {}),当文档结构完全加载完毕再去执行函数中的代码。
(2).$("ul li").mouseover(function () {}),为li元素注册mouseover事件处理函数。
(3).$(this).stop().animate({ width: 538 }, 500),以动画方式设置当前li元素的宽度为538px,stop()方法的作用是为了防止鼠标快速反复悬浮离开,导致动作重复执行的现象。
(4).$(this).siblings().stop().animate({ width: 106 }, 500),当前悬浮元素的其他的元素的宽度以动画方式设置为106px。
三.相关阅读:
(1).mouseover事件参阅jQuery mouseover事件一章节。
(2).animate()参阅jQuery animate()一章节。
(3).siblings()参阅jQuery siblings()一章节。
(4).stop()参阅jQuery stop()一章节。
jQuery手风琴图片切换,这样的场景在实际项目中还是用的比较多的,关于jQuery手风琴图片切换就介绍到这了。