轻松实现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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
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
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
javaScript call 函数的用法说明
2010/04/09 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
Javascript实现关闭广告效果
2021/01/29 Javascript
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
python查询mysql,返回json的实例
2018/03/26 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
Python如何访问字符串中的值
2020/02/09 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
网上卖盒饭创业计划书
2014/01/26 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
高中军训感言800字
2014/03/05 职场文书
运动会的口号
2014/06/09 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
图神经网络GNN算法
2022/05/11 Python