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 上下滚动展示模仿Marquee机制
Dec 20 Javascript
JavaScript 高效运行代码分析
Mar 18 Javascript
JavaScript中的this实例分析
Apr 28 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 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
长波有什么东西
2021/03/01 无线电
PHP生成带有雪花背景的验证码
2006/10/09 PHP
也谈 PHP 和 MYSQL
2006/10/09 PHP
用PHP实现图象锐化代码
2007/06/14 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
驱动事件的addEvent.js代码
2007/03/27 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
使用python实现省市三级菜单效果
2016/01/20 Python
python遍历目录的方法小结
2016/04/28 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
国贸专业个人求职信范文
2014/01/08 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
高中班级口号
2014/06/09 职场文书
办理房产过户的委托书
2014/09/14 职场文书
专职安全员岗位职责
2015/04/11 职场文书
表彰大会新闻稿
2015/07/17 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android