HTML5学堂-码匠 HTML5学堂

您当前位于:jQuery 实战开发 ——> jQuery特效实战开发 - 实例:手风琴图片切换效果

jQuery特效实战开发 - 实例:手风琴图片切换效果

2015/06/09 23:51:58 | 作者:HTML5学堂(码匠) | 分类:jQuery 实战开发 | 关键词:JQ特效,图片切换,动画,JQ,jQuery

JQ特效—手风琴

HTML5学堂:手风琴效果采用的时候jQuery插件制作,该效果采用较新颖的方式将图集展示出来。与传统的大图滚动相比,该效果更易于用户操作,用户只要把鼠标移动到某一张图片上,就可以观赏到该图片的全图,其他的图片只显示缩略图。

效果需求

在网站中,我们经常看到图集是采用大图滚动的方式向用户展示图片信息。本文为大家推荐图集的另外一种展示方式——手风琴式,手风琴式的图集展示功能是当用户鼠标移入到图片上时,当前图片能显示所有内容,其他图片只能显示一部分内容,整个效果均为渐变的过程。

效果展示

HTML5学堂  手风琴效果图

效果实现

结构代码

  1. <body>
  2. <div class="wrap">
  3.     <div></div>
  4.     <div></div>
  5.     <div></div>
  6.     <div></div>
  7. </div>
  8. </body>

以上代码为手风琴效果的HTML结构,使用一个类名为wrap的div标签包裹内容,在该div下,使用了4个div来显示图片信息,采用div而不使用img是为了避免因为div的宽度变小时,图片不会被压缩。

欢迎沟通交流~HTML5学堂

样式代码

  1. <style>
  2. .wrap {
  3.     width: 600px;
  4.     height: 300px;
  5.     margin: 0 auto;
  6. }
  7. .wrap div {
  8.     float: left;
  9.     overflow: hidden;
  10.     width: 100px;
  11.     height: 100%;
  12. }
  13. .wrap div:nth-child(1) {
  14.     background: url("../../common/images/tea_1.jpg") center center no-repeat;
  15. }
  16. .wrap div:nth-child(2) {
  17.     background: url("../../common/images/tea_4.jpg") center center no-repeat;
  18. }
  19. .wrap div:nth-child(3) {
  20.     background: url("../../common/images/tea_6.jpg") center center no-repeat;
  21. }
  22. .wrap div:nth-child(4) {
  23.     background: url("../../common/images/tea_5.jpg") center center no-repeat;
  24. }
  25. </style>

以上代码为手风琴效果的CSS样式代码,首先给类名为wrap的div标签设置了宽高和水平居中的样式,并给该标签下的div设置宽高、浮动及超出隐藏的样式,设置了浮动之后,这4个div就处于同一行,超出隐藏会使超出宽度的内容被隐藏掉,之后为每个div设置背景图。

行为代码

  1. <script>
  2. $(".wrap div").eq(0).css({
  3.     "width" : "300px"
  4. });
  5. $(".wrap div").mouseover(function(){
  6.     $(this).stop(true).animate({
  7.         "width" : "300px"
  8.     });
  9.     $(this).siblings().stop(true).animate({
  10.         "width" : "100px"
  11.     })
  12. })
  13.     </script>

以上代码为手风琴效果的jQuery行为代码,首先对整个效果进行初始化处理,使用.eq(0)选择类名为wrap下第一个div标签,并通过.CSS({"width" : "300px"})进行宽度的修改,初始化处理完毕。其次,给每张图片(即类名为wrap下每个div的背景图)绑定了鼠标移入事件,当用户的鼠标移入到某张图片上方时,触发预定的函数,该图片发生jQuery的.animate()动画效果,动画改变了当前图片的宽度大小。在该动画的执行过程中,其他的图片也执行另一个动画效果,该动画的内容是将这些图片的宽度还原到css中设置的初始值100px。为了避免因为用户操作速度快而导致动画冲突的问题,在动画之前,我们需要使用.stop()对未执行完毕的动画进行处理。

注意事项

类名为wrap的div标签下的元素不能是img,必须是要设定背景图才能实现效果,img在宽高被改变时,图片会被压缩,影响效果。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS