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基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 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 基本语法格式
2009/12/15 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
javascript比较文档位置
2008/04/08 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
下载给定网页上图片的方法
2014/02/18 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
用Python 执行cmd命令
2020/12/18 Python
光荣入党自我鉴定
2014/01/22 职场文书
司仪主持词两篇
2014/03/22 职场文书
小学教师师德整改措施
2014/09/29 职场文书
法人身份证明书
2014/10/08 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
MySQL视图概念以及相关应用
2022/04/19 MySQL
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle