JS实现手风琴特效


Posted in Javascript onNovember 08, 2020

本文实例为大家分享了JS实现手风琴特效的具体代码,供大家参考,具体内容如下

效果图

JS实现手风琴特效

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>手风琴</title>
  <link rel="stylesheet" href="index.css" rel="external nofollow" >
</head>

<body>
  <div class="wrapper">
    <ul class="wrapUl">
      <li>
        <div class="title">
          <h1>温泉酒店</h1>
        </div>
        <div class="picBox picBox1"></div>
        <div class="decration">有谁不爱泡温泉?浸入雾气蒸腾的泉水之中,把身体泡成一片茶叶,舒展轻盈。有比这更美妙的感觉吗?</div>
      </li>
      <li>
        <div class="title">
          <h1>时尚酒店</h1>
        </div>
        <div class="picBox picBox2"></div>
        <div class="decration">浪漫,是香闺围笼,是灯火迷离,泪眼婆裟的唯美,是杨柳岸、晓风残月中的无语凝噎……</div>
      </li>
      <li>
        <div class="title">
          <h1>设计师酒店</h1>
        </div>
        <div class="picBox picBox3"></div>
        <div class="decration">前卫的酒店设计理念,独具魅力的风格,优美的自然风光才能有这样顶级的酒店</div>
      </li>
      <li>
        <div class="title">
          <h1>青年旅店</h1>
        </div>
        <div class="picBox picBox4"></div>
        <div class="decration">我为你煮一杯温茶,斟一杯美酒。让我们席地而坐,听你的梦想。用你的只言片语装点我们的梦想博物馆</div>
      </li>
      <li>
        <div class="title">
          <h1>民宿客栈</h1>
        </div>
        <div class="picBox picBox5"></div>
        <div class="decration">在这里,你可以静静发呆,而不被人打扰;在这里,你能看见最美好的星星,能让你找到最深的感动</div>
      </li>
      <li>
        <div class="title">
          <h1>海岛酒店</h1>
        </div>
        <div class="picBox picBox6"></div>
        <div class="decration">不想过冬,厌倦沉重,就飞去热带的岛屿游泳,卸下包袱,放下压力,在这碧海蓝天之中</div>
      </li>
      <li>
        <div class="title">
          <h1>海外酒店</h1>
        </div>
        <div class="picBox picBox7"></div>
        <div class="decration">因地形地质的区别,世界各地的温泉也千差万别,选择一处适合自己的温泉,你会忘记世界</div>
      </li>
    </ul>
  </div>
  <script src="jquery.js"></script>
  <script src="index.js"></script>
</body>
</html>

JS代码

var oUl = $('ul'),
  oLi = $('li'),
  len = oLi.length,
  width = parseInt(oUl.css('width')),
  gw = width / len,
  ot = Math.floor((width - 400) / (len - 1));
  flag = true;
function init(){
  if(flag){
    change($(oLi[len-1]));    
  }
}
function bindEvent(){
  oLi.on('click',function(){
    change($(this));
    if(($(this).index() +1) == len){
      flag = false;
    }else{
      flag = true;      
    }
  });
  oUl.on('mouseleave',function(){
    init();
  })
}
function change(event){
  event.animate({
    'width':'400px'
  },300,'linear').siblings().animate({
    'width':ot + 'px'
  },300,'linear');
  event.find('.title').css({
    'display':'none'
  })
  event.siblings().find('.title').css({
    'display':'block'
  })
  event.find('.decration').css({
    'bottom':'0px'
  })
  event.siblings().find('.decration').css({
    'bottom':'-50px'
  })
}
init();
bindEvent();

CSS代码

*{
  margin:0;
  padding:0;
  list-style:none;
}
body{
  background-color:#333;
}
.wrapper{
  width:80%;
  margin:50px auto;
  padding:40px;
}
.wrapper ul{
  width:100%;
  height:300px;
  overflow: hidden;
}
.wrapper ul li{
  float: left;
  width:14.2;
  height:260px;
  position:relative;
  overflow:hidden;
  cursor:pointer;  
}
.picBox{
  width:100%;
  height:100%;
}
.picBox1{
  background:url(images/1.jpg) no-repeat center 0;
}
.picBox2{
  background:url(images/2.jpg) no-repeat center 0;
}
.picBox3{
  background:url(images/3.jpg) no-repeat center 0;
}
.picBox4{
  background:url(images/4.jpg) no-repeat center 0;
}
.picBox5{
  background:url(images/5.jpg) no-repeat center 0;
}
.picBox6{
  background:url(images/6.jpg) no-repeat center 0;
}
.picBox7{
  background:url(images/7.jpg) no-repeat center 0;
}
.wrapper ul li .title{
  position:absolute;
  overflow:hidden;
  width:100%;
  height:100%;
  left:0;
  top:0;
  background:rgba(0,0,0,0.5);
}
.wrapper ul li .title h1{
  color:#fff;
  width:30px;
  margin:0 auto;
  display:block;
  font:20px;
  padding-top:30px;
  opacity:0.8;
}
.wrapper ul li .decration{
  width:400px;
  height:40px;
  padding-left:20px;
  padding-right:30px;     
  position:absolute;
  left:0; 
  bottom:-50px;
  background:rgba(0,0,0,0.3); 
  color:#FFF; 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
微信小程序调用后台service教程详解
Nov 06 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 #Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 #Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 #Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 #Javascript
解决Vue watch里调用方法的坑
Nov 07 #Javascript
浅谈vue.watch的触发条件是什么
Nov 07 #Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 #Javascript
You might like
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
javascript multibox 全选
2009/03/22 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python计算时间差的方法
2015/05/20 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
利用python计算时间差(返回天数)
2019/09/07 Python
Python用input输入列表的实例代码
2020/02/07 Python
基于python实现模拟数据结构模型
2020/06/12 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
2014年英语工作总结
2014/12/20 职场文书
工作表扬信范文
2015/01/17 职场文书
英语复习计划
2015/01/19 职场文书
雨花台导游词
2015/02/06 职场文书
2015年预算员工作总结
2015/05/14 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书