轻松实现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实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
JS提交form表单实例分析
Dec 10 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
JavaScript DOM基础
2015/04/13 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
Python变量作用范围实例分析
2015/07/07 Python
Python实现的计数排序算法示例
2017/11/29 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
如何在Python对Excel进行读取
2020/06/04 Python
工程造价专业大专生求职信
2013/10/06 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
世界遗产导游词
2015/02/13 职场文书
食堂卫生管理制度
2015/08/04 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python