轻松实现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 相关文章推荐
javascript innerText和innerHtml应用
Jan 28 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
Node.js 中判断一个文件是否存在
Aug 24 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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
坏狼的PHP学习教程之第1天
2008/06/15 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
Document 对象的常用方法
2009/07/31 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
清除输入框内的空格
2016/12/21 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
pycharm修改file type方式
2019/11/19 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
浅谈html5 响应式布局
2014/12/24 HTML / CSS
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
物业管理专业个人的自我评价
2013/11/19 职场文书
社会保险接收函
2014/01/12 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
后进生评语大全
2015/01/04 职场文书
高中英语教学反思范文
2016/03/02 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server