轻松实现jquery手风琴效果


Posted in Javascript onJanuary 14, 2016

为大家讲解的JQuery动画特效为手风琴,废话不多说,先看最终实现效果图。

轻松实现jquery手风琴效果

一、实现原理分析

轻松实现jquery手风琴效果

对应的立体图:

轻松实现jquery手风琴效果

二、 HTML代码分析

<body> 
 <div id="container"> 
  <ul id="content"> 
   <li class="first"> 
    <h3>真</h3> 
    <div><img src="images/0.jpg"/></div> 
   </li> 
   <li class="second"> 
    <h3>的</h3> 
    <div><img src="images/1.jpg"/></div> 
   </li> 
   <li class="third"> 
    <h3>爱</h3> 
    <div><img src="images/2.jpg"/></div> 
   </li> 
   <li class="forth"> 
    <h3>你</h3> 
    <div><img src="images/4.jpg"/></div> 
   </li> 
  </ul> 
 </div> 
</body>

1. id为container的div就是上面分析中的红色区域。
2. id为content的ul就是用来存放所有的li。

3. 每个li就是一个红色区域与对应图片的组合。

三、CSS代码分析

*{margin: 0; padding: 0;} 
 
  img{ 
   border:0; 
  } 
 
  #container 
  { 
   width:680px; 
   height: 300px; 
   margin: 100px auto; 
   position: relative; 
   border:3px solid red; 
   overflow: hidden; 
  } 
 
  #container #content 
  { 
   list-style: none; 
  } 
 
  #container #content li{ 
   width:590px; 
   height:300px; 
   position: absolute; 
  } 
 
  #container #content li.second{ 
   left:590px; 
  } 
 
  #container #content li.third{ 
   left:620px; 
  } 
 
  #container #content li.forth{ 
   left:650px; 
  } 
 
  #container #content li h3{ 
   float:left; 
   width: 24px; 
   height:294px; 
   border:3px solid blue; 
   background-color: yellow; 
   cursor: pointer; 
  } 
 
  #container #content li div{ 
   float: left; 
   width: 560px; 
   height:300px; 
  }

1. *和img标签用来去除系统默认的间隙等效果。
2. #container就是在上面分析的可视区域,所以它的尺寸是 680 * 300,并且它是所有子元素的容器,所以它是相对定位(position: relative)。

3. #container #content就是去除掉ul默认的小圆点效果。

4. 所有的li采用绝对定位,并且它们的大小均为 590 * 300, 然后设置后面li的left值,并且设置li的h3(黄色区域)属性漂浮。

当上面所有的css样式设置完毕以后,最终呈现的效果就是分析图中的效果。

四、JQuery代码分析

手风琴的js交互代码其实非常简单,就是实时的改变对应li的绝对位置的left值就可以了,代码如下:

$(function(){ 
 
   $("#container #content li.first h3").mouseenter(function(){ 
    $("#container #content li.second").stop().animate({"left":590}, 1000); 
    $("#container #content li.third").stop().animate({"left":620}, 1000); 
    $("#container #content li.forth").stop().animate({"left":650}, 1000); 
   }); 
 
   $("#container #content li.second h3").mouseenter(function(){ 
    $("#container #content li.second").stop().animate({"left":30}, 1000); 
    $("#container #content li.third").stop().animate({"left":620}, 1000); 
    $("#container #content li.forth").stop().animate({"left":650}, 1000); 
   }); 
 
   $("#container #content li.third h3").mouseenter(function(){ 
    $("#container #content li.second").stop().animate({"left":30}, 1000); 
    $("#container #content li.third").stop().animate({"left":60}, 1000); 
    $("#container #content li.forth").stop().animate({"left":650}, 1000); 
   }); 
 
   $("#container #content li.forth h3").mouseenter(function(){ 
    $("#container #content li.second").stop().animate({"left":30}, 1000); 
    $("#container #content li.third").stop().animate({"left":60}, 1000); 
    $("#container #content li.forth").stop().animate({"left":90}, 1000); 
   }); 
    
  });

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js压缩利器
Feb 20 Javascript
封装好的省市地区联动控件附下载
Aug 13 Javascript
javascript 特殊字符串
Feb 25 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 #Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 #Javascript
分享网页检测摇一摇实例代码
Jan 14 #Javascript
jquery淡入淡出效果简单实例
Jan 14 #Javascript
jQuery实现的左右移动焦点图效果
Jan 14 #Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 #Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 #Javascript
You might like
第十一节 重载 [11]
2006/10/09 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
php读取excel文件的简单实例
2013/08/26 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
php构造函数实例讲解
2013/11/13 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
初步认识Python中的列表与位运算符
2015/10/12 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
Python虚拟环境venv用法详解
2020/05/25 Python
python中实现词云图的示例
2020/12/19 Python
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
军神教学反思
2014/02/04 职场文书
校园绿化美化方案
2014/06/08 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
《风筝》教学反思
2016/02/23 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫