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>
<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)
})
})();
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍JS实现导航栏楼层特效，包括了JS实现导航栏楼层特效的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JS实现导航栏楼层的具体代码，供大家参考，具体内容如下 知识点 1.多个事件有冲突的时候，需要设置flag判断是什么事件，进而进行后续操作。 2.楼层效果就是判断scrollTop和offsetTop的关系 3.引入工具库工具库 运行效果 导航与界面实现互动 代码 以上就
-
本文向大家介绍jQuery实现广告条滚动效果，包括了jQuery实现广告条滚动效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jQuery实现广告条滚动效果的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery实现仿QQ在线客服效果的滚动层代码，包括了jQuery实现仿QQ在线客服效果的滚动层代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现仿QQ在线客服效果的滚动层代码。分享给大家供大家参考。具体如下： 这是一款jQuery滚动层，可以做成仿QQ在线客服，虽然效果有点生硬，但水平就这么高了，弹出层是挺实用的，期待大家有新的改进。 运行效果截图如下：
-
本文向大家介绍jQuery晃动层特效实现方法，包括了jQuery晃动层特效实现方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery晃动层特效实现方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的jQuery程序设计有所帮助。
-
本文向大家介绍基于jQuery实现滚动切换效果，包括了基于jQuery实现滚动切换效果的使用技巧和注意事项，需要的朋友参考一下 仿锋利的Jquery案例做的一个滚动切换效果，供大家参考，具体内容如下 效果如下图: 前台HTML代码如下: RollControl.css代码如下: .view_content_fixed下的SPAN标签是为了加标题的 效果图如下: 还有两个地方没有细化，第一个就是 这
-
本文向大家介绍基于jQuery实现数字滚动效果，包括了基于jQuery实现数字滚动效果的使用技巧和注意事项，需要的朋友参考一下 滚动方向：上下 源代码下载 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！