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 相关文章推荐
页面版文本框智能提示JS代码
Nov 20 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
javascript异常处理实现原理详解
Feb 17 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输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
js转换对象为xml
2017/02/17 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
Python单元测试简单示例
2018/07/03 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
儿科主治医生个人求职信
2013/09/23 职场文书
办公室年终个人自我评价
2013/10/28 职场文书
五一家具促销方案
2014/01/10 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
中班开学寄语
2014/04/04 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
复试通知单模板
2015/04/24 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
老人院义工活动感想
2015/08/07 职场文书
2016年寒假生活小结
2015/10/10 职场文书
提档介绍信范文
2015/10/22 职场文书
总结Python常用的魔法方法
2021/05/25 Python