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滚动监听实现商城楼梯式导航效果
话不多说,上局部效果图: html结构,左侧定位的导航需要一个ul,中间内容,我是直接截得图片,为了效果省事,也是用的ul,最后你们要用的话也可以用ul,或者div,但是每个区域得是一个div,例如,精选的放一个div,女装的放一个div,所有的区域都套在一个大的div里面,也就是类似于ul>li的结构(只提供html结构和jQuery,样式的话根据设计稿): <div class="menu"> <ul> <li class="on&qu
-
JavaScript实现楼梯滚动特效(jQuery实现)
想必大家都用过JD,在它的首页里面有个很常见的特性:就是 楼梯特效 . 对于程序员的我们,可以说是万物皆可盘.那么,我们就来盘一下它. 先上要实现的效果图: 效果功能描述:当点击右侧悬浮的按钮时,点击相应模块,左侧内容区域会自动跳转到该模块区域. 下面,上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&q
-
jQuery仿京东商城楼梯式导航定位菜单
实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项! 涉及知识点:find().parent().offset().scroll()等jQ函数,请自觉复习各种函数! html代码: <!-- 导航菜单 --> <div id="menu"> <ul> <li>1F<span>服饰</span></li> <li>2F<span>美妆</span></
-
jquery实现滑动楼梯效果
本文实例为大家分享了jquery实现滑动楼梯效果的具体代码,供大家参考,具体内容如下 思路:鼠标滚动的时候页面跟随变化,点击模块时候,实现指哪打哪效果 代码的实现 1.html和css代码 <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li{ padding: 0; mar
-
利用jQuery实现滑动开关按钮效果（附demo源码下载）
首先来看看要实现的效果图: HTML结构如下: <div class="boxwrap fr"><!--容器 开始--> <div class="switchBox fl" id="timeList" typeId="time"> <table cellpadding="0" cellspacing="0"> <tr> <
-
jquery实现最简单的滑动菜单效果代码
本文实例讲述了jquery实现最简单的滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/
-
jQuery实现的经典滑动门效果
本文实例讲述了jQuery实现的经典滑动门效果.分享给大家供大家参考.具体如下: 这是一款jQuery 滑动门,从样式上来说,虽然有些古板,但已经具备了经典的滑动门功能,感兴趣的朋友可以继续美化一下界面. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-jd-hd-move-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
-
jQuery实现TAB风格的全国省份城市滑动切换效果代码
本文实例讲述了jQuery实现TAB风格的全国省份城市滑动切换效果代码.分享给大家供大家参考.具体如下: 这里演示jQuery实现的全国省市菜单,加入了选项卡风格,把全国城市按字母范围归类,鼠标移到某一分类的时候,滑动门展开显示所属的全国省分和城市.特别适合于分类信息网站使用.当然,在需要选择省市的时候,也是可以用的.仔细看了下,菜单里面的城市还比较全,你不用再手动添加城市了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tab
-
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载（二）
今天我们继续内容滑动切换效果的第二部分讲解.如今我们的web开发都要适应移动设备,就是说我们的web页面要在移动设备如手机端也能正常访问,所以我将第一部分的基本切换效果做了加强,增加了响应式和触控滑动效果. 效果展示 源码下载 本文是hwSlider-内容滑动切换效果的第二部分,演示DEMO都是基于第一部分内容的基础上的,所以,如果您还没阅读过第一部分的话,请先移步参阅:基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一) 响应式 什么是响应式设计,这里我就不描述了.
-
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
本文实例讲述了jQuery实现仿微软首页感应鼠标变化滑动窗口效果.分享给大家供大家参考.具体如下: 这是一款jQuery仿微软首页感应鼠标变化的滑动窗口,鼠标放上后,窗口会向左拉长,鼠标移走后恢复原样,是在微软官方网站发现的,看了看代码,觉得很容易就扣下来,不敢独享. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-microsoft-web-nav-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "
-
jquery实现表单输入时提示文字滑动向上效果
本文实例讲述了jquery实现表单输入时提示文字滑动向上效果.分享给大家供大家参考.具体如下: 这里基于jQuery实现的表单输入框提示效果,当不输入的时候,提示文字就显示在输入框中,当鼠标点击文本框要输入文字的时候,提示文字向滑出输入框,好像很个性也很智能的样子,用户体验比较不错,运用了CSS3的部分属性,因此在测试时,请尽量要用高版本的IE9或chrome和火狐等网页浏览器. 运行效果截图如下: 具体代码如下: <!doctype html> <html> <head&g
-
jQuery实现带延迟效果的滑动菜单代码
本文实例讲述了jQuery实现带延迟效果的滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的滑动菜单,鼠标移到某菜单项上,菜单的背景可以滑动过来,平滑的滑动效果,炫动的导航效果,相比没有动画的菜单,这款菜单真的挺不错哦. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-delay-style-menu-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/
-
jQuery实现自动切换播放的经典滑动门效果
本文实例讲述了jQuery实现自动切换播放的经典滑动门效果.分享给大家供大家参考.具体如下: 这是一个滑动门代码,从外观上看,简洁经典,似乎与平时见到的滑动门没什么区别,不过它有一个重要的功能与众不同,那就是会自动切换[播放]滑动门的内容,像腾讯QQ登录后弹出的每日要闻一样,如果你再加以美化,那么就更完美无暇了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-cha-tab-style-codes/ 具体代码如下: <!