jquery实现滑动楼梯效果
更新时间：2021年09月23日 08:58:53 作者：Zhang_xiao_pang
这篇文章主要为大家详细介绍了jquery实现滑动楼梯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery实现滑动楼梯效果的具体代码，供大家参考，具体内容如下
思路：鼠标滚动的时候页面跟随变化，点击模块时候，实现指哪打哪效果
代码的实现
1.html和css代码
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
#floorNav{
display: none;
position: fixed;
top: 100px;
left: 50px;
width: 32px;
border: 1px solid #CECECE;
}
#floorNav li{
position: relative;
width: 32px;
height: 32px;
border-bottom: 1px solid #CECECE;
text-align: center;
line-height: 32px;
font-size: 12px;
}
#floorNav span{
display: none;
position: absolute;
top: 0;
left: 0;
width: 32px;
height: 32px;
background: red;
color: white;
}
#floorNav li:hover span,#floorNav li.hover span{
display: block;
}
#floorNav li:last-child{
background: red;
color: white;
border-bottom: none;
}
#header,#footer{
width: 1000px;
height: 1000px;
background: darkgoldenrod;
margin: 0 auto;
}
#content{
}
#content li{
width:1000px;
height: 600px;
margin: 0 auto;
font-size: 40px;
text-align: center;
line-height: 600px;
}
</style>
</head>
<body>
<div id="floorNav">
<ul>
<li>1F<span>服饰</span></li>
<li>2F<span>美妆</span></li>
<li>3F<span>手机</span></li>
<li>4F<span>家电</span></li>
<li>5F<span>数码</span></li>
<li>6F<span>运动</span></li>
<li>7F<span>居家</span></li>
<li>8F<span>母婴</span></li>
<li>9F<span>食品</span></li>
<li>10F<span>图书</span></li>
<li>11F<span>服务</span></li>
<li>TOP</li>
</ul>
</div>
<div id="header"></div>
<div id="content">
<ul>
<li style="background: #8B0000;">服饰</li>
<li style="background: #123;">美妆</li>
<li style="background: #667;">手机</li>
<li style="background: #558;">家电</li>
<li style="background: #900;">数码</li>
<li style="background: #456;">运动</li>
<li style="background: #789;">居家</li>
<li style="background: #234;">母婴</li>
<li style="background: #567;">食品</li>
<li style="background: #887;">图书</li>
<li style="background: #980;">服务</li>
</ul>
</div>
<div id="footer"></div>
</body>
2.接下来进行引入一个 jQuery 文件然后进行jQuery代码的编写
<script>
$(function(){
//定义判别
var flag = true
$(window).scroll(function(){
if(flag){
//显示隐藏的楼梯
var scrollTop=$(this).scrollTop();
if(scrollTop>=500){
$("#floorNav").fadeIn()
} else{
$("#floorNav").fadeOut();
}
//指哪打哪
$("#content li").each(function(){
if(scrollTop>=$(this).offset().top-$(this).outerHeight()/2){
var index = $(this).index();
$("#floorNav li").eq(index).addClass("hover")
.siblings().removeClass("hover")
}
})
}
})
//点击的时候滚动条滚动到相应的位置
$("#floorNav li:not(:last)").click(function(){
flag=false
var index = $(this).index();
$("html ,body").animate({"scrollTop":$("#content li").eq(index).offset().top},500)
flag=true
$(this).addClass("hover").siblings().removeClass("hover")
})
$("#floorNav li:last").click(function(){
flag = false;
$("html,body").animate({"scrollTop":0},200,function(){
flag = true
})
})
})
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
这篇文章主要介绍了Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码) 需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
今天小编就为大家分享一篇关于jQuery.parseJSON()函数详解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-02-02
$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效，下面简单为大家介绍下jquery $.fn $.fx到底是怎么一回事2013-11-11
下面小编就为大家带来一篇jQuery实现锚点向下平滑滚动特效示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了基于jquery和svg实现超炫酷的动画特效,想学习SVG的童鞋们可以来参考下。2014-12-12
这篇文章主要为大家详细介绍了jQuery-Citys省市区三级菜单联动插件使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
jquery 弹出层注册页面,尽力提高用户体验，吸引用户注册。2010-06-06
这篇文章主要为大家详细介绍了jquery实现网页定位导航，具有一定的实用价值和参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了jquery插件NProgress.js制作网页加载进度条的相关资料,需要的朋友可以参考下2015-06-06
jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果2014-03-03
最新评论