使用jquery如何实现楼层滚动效果

来源：动视网责编：小OO 时间：2020-11-27 19:37:07

使用jquery如何实现楼层滚动效果

本文实例为大家分享了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。js。

推荐度：

点击下载本文 文档为doc格式

导读本文实例为大家分享了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。js。

这篇文章主要为大家详细介绍了jquery实现楼层滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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> 
 <p id="header"></p> 
 <p class="floor" id="f1"> 
 <p>第一层</p> 
 </p> 
 <p class="floor" id="f2"> 
 <p>第二层</p> 
 </p> 
 <p class="floor" id="f3"> 
 <p>第三层</p> 
 </p> 
 <p 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> 
 </p> 
 
 <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) 
 }) 
})();

上面是我整理给大家的，希望今后会对大家有帮助。

使用tangram.js库如何实现js类

使用JavaScript如何实现寄生组合式继承

在JS中如何实现非首屏图片延迟加载