本文实例为大家分享了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="/UploadFiles/2021-04-02/jquery.min.js">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,楼层滚动
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“jquery实现楼层滚动效果”评论...
更新动态
2024年05月10日
2024年05月10日
- 群星《妖神令 影视原声专辑》[320K/MP3][85.23MB]
- 逆水寒手游五子棋第二十三关怎么过 逆水寒手游残局攻略大全
- 逆水寒手游五子棋第二十二关怎么过 逆水寒手游残局攻略大全
- 欢乐钓鱼大师最稀有的鱼是什么 欢乐钓鱼大师最稀有的鱼攻略
- ABC唱片-《蔡琴.三十周年纪念版》6N纯银镀膜[WAV+CUE]
- ABC唱片-《汉斯.德斯辛克.心中布鲁斯》6N纯银镀膜[WAV+CUE]
- 群星《DJ·夜色魅影HQ》头版限量[低速原抓WAV+CUE]
- 《如龙》桐生声优被警察拦下盘问:你有犯罪记录吗?
- 游族2023年净利润0.91亿元 《少年西游记2》即将公测
- 曝快手北京游戏事业部全数被裁 项目测试数据未达标
- 李雨寰.2012-我可是天使【有凰音乐】【WAV+CUE】
- 刘美君.1991-听我细诉【BMG】【WAV+CUE】
- 群星.2016-滚石爱情故事3CD【滚石】【WAV+CUE】
- 欢乐钓鱼大师怎么解锁全地图 欢乐钓鱼大师全地图解锁方法
- 欢乐钓鱼大师锦标赛在哪里进 欢乐钓鱼大师锦标赛入口位置介绍