jquery实现楼层滚动效果


Posted in jQuery onJanuary 01, 2018

本文实例为大家分享了jquery实现楼层滚动效果展示的具体代码,供大家参考,具体内容如下

html:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <link rel="stylesheet" href="css/base.css" rel="external nofollow" > 
  <style> 
    #header,#f1,#f2,#f3{ 
      width: 80%; 
      height: 500px; 
      background: yellow; 
      margin-left: 10%; 
      margin-top: 50px; 
    } 
    #f1{ 
      background: green; 
    } 
    #f2{ 
      background: red; 
    } 
    #f3{ 
      background: blue; 
    } 
    #lift{ 
      position: fixed; 
      top: 280px; 
      display: none; 
    } 
    .lift_btn{ 
      display: inline-block; 
      width: 50px; 
      height: 50px; 
      border: 1px solid #000; 
    } 
    .hover{ 
      background: red; 
    } 
  </style> 
</head> 
<body> 
  <div id="header"></div> 
  <div class="floor" id="f1"> 
    <p>第一层</p> 
  </div> 
  <div class="floor" id="f2"> 
    <p>第二层</p> 
  </div> 
  <div class="floor" id="f3"> 
    <p>第三层</p> 
  </div> 
  <div id="lift"> 
    <ul> 
      <li class="lift_item"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn"> 
          <span>1</span> 
        </a> 
      </li> 
      <li class="lift_item"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn"> 
          <span>2</span> 
        </a> 
      </li> 
      <li class="lift_item"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn"> 
          <span>3</span> 
        </a> 
      </li> 
    </ul> 
  </div> 
 
  <script src="js/jquery.min.js"></script> 
  <script src="js/floor.js"></script> 
</body> 
</html>

js:

(()=>{ 
  var $lift=$("#lift"); 
  $(window).scroll(()=>{ 
    var scrollTop=$('html,body').scrollTop(); 
    var $f1=$("#f1"); 
    var offsetTop=$f1.offset().top; 
    if(offsetTop<scrollTop+innerHeight/2) 
      $lift.fadeIn(500); 
    else 
      $lift.fadeOut(500); 
    var $floors=$(".floor"); 
    $floors.each((i,elem)=>{ 
      var $f=$(elem); 
      if($f.offset().top<scrollTop+innerHeight/2) 
        $lift.find(".lift_item:eq("+i+")").addClass("hover").siblings().removeClass("hover"); 
    }); 
  }); 
 
  $lift.children("ul").on("click","li",function(){ 
    var $li=$(this); 
    var i=$li.index(); 
    var $fi=$(".floor:eq("+i+")"); 
    var offsetTop=$fi.offset().top; 
    $("html").animate({ 
      scrollTop:offsetTop-60 
    },500) 
  }) 
})();

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

jQuery 相关文章推荐
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
jquery实现左右轮播切换效果
Jan 01 #jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 #jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 #jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 #jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 #jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 #jQuery
You might like
融入意大利的咖啡文化
2021/03/03 咖啡文化
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
javascript动态创建对象的属性详解
2018/11/07 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
基于python调用psutil模块过程解析
2019/12/20 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
学习心得体会
2014/01/01 职场文书
采购部主管岗位职责
2014/01/01 职场文书
局火灾防控工作方案
2014/05/25 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
2014年评职称工作总结
2014/11/20 职场文书
优秀党员先进材料
2014/12/18 职场文书
护士辞职信怎么写
2015/02/27 职场文书
企业投资意向书
2015/05/09 职场文书
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA