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 相关文章推荐
Javascript String.replace的妙用
Sep 08 Javascript
基于Jquery的温度计动画效果
Jun 18 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 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
那些年一起学习的PHP(一)
2012/03/21 PHP
php中rename函数用法分析
2014/11/15 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
json字符串传到前台input的方法
2018/08/06 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
Python logging模块handlers用法详解
2020/08/14 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
保安的辞职报告怎么写
2014/01/20 职场文书
节能宣传周活动总结
2014/05/08 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Apache自带的ab压力测试工具的实现
2022/07/23 Servers