轻松实现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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
简单实现js页面切换功能
Jan 10 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
老生常谈js数据类型
Aug 03 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
Javascript var变量删除原理及实现
Aug 26 Javascript
微信小程序使用前置摄像头拍照
Oct 22 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
PHP5 安装方法
2006/10/09 PHP
使用 php4 加速 web 传输
2006/10/09 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
php把session写入数据库示例
2014/02/26 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
vuex实现简易计数器
2016/10/27 Javascript
理解javascript中的闭包
2017/01/11 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
Python构建XML树结构的方法示例
2017/06/30 Python
python3爬虫之设计签名小程序
2018/06/19 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
Python通过Pillow实现图片对比
2020/04/29 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
安全生产检查通报
2014/01/29 职场文书
入党介绍人考察意见
2015/06/01 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
springboot如何初始化执行sql语句
2021/06/22 Java/Android
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS