JavaScript实现楼梯滚动特效(jQuery实现)
想必大家都用过JD，在它的首页里面有个很常见的特性：就是 楼梯特效 。
对于程序员的我们，可以说是万物皆可盘。那么，我们就来盘一下它。
先上要实现的效果图：
效果功能描述：当点击右侧悬浮的按钮时，点击相应模块，左侧内容区域会自动跳转到该模块区域。
下面，上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
li{
list-style-type: none;
}
.top{
height:900px;
background : #ddd;
}
.footer{
height : 600px;
background : #ddd;
}
.content{
height:800px;
}
.content h1{
text-align:center;
line-height: 80px;
}
.stairs-list{
width : 60px;
position: fixed;
right:5%;
top:50%;
margin-top:-120px;
background : #fff;
}
.stairs-list li{
width:50px;
height:50px;
line-height: 25px;
text-align : center;
padding:5px;
border-bottom:1px solid #ddd;
}
.stairs-list li.active{
color : orangered;
}
.stairs li span{
display: block;
}
</style>
</head>
<body>
<div class="top">
</div>
<div class="content" style="background-color : yellowgreen ">
<h1>京东秒杀</h1>
</div>
<div class="content" style="background-color : skyblue ">
<h1>特色优选</h1>
</div>
<div class="content" style="background-color : #666 ">
<h1>频道广场</h1>
</div>
<div class="content" style="background-color : orangered ">
<h1>为您推荐</h1>
</div>
<div class="footer"></div>
<ul class="stairs-list">
<li>
<span>京东</span>
<span>秒杀</span>
</li>
<li>
<span>特色</span>
<span>优选</span>
</li>
<li>
<span>频道</span>
<span>广场</span>
</li>
<li>
<span>为您</span>
<span>推荐</span>
</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// OOA :
// 1. 初始化数据;
// 2. 事件绑定;
// 3. 根据scrollTop值判定所在楼层;
// 4. 效果添加;
// 5. 根据点击事件切换下标;
function Stairs( options ){
this.options = options;
this.init();
}
Stairs.prototype = {
constructor : Stairs,
init : function(){
// 内容元素高度数组;
this.content_ele_offset_top_list = [];
// 获取元素的偏移高度;
$(this.options.content_selector).offset( function( index , coords) {
// 将每一个元素的高度值放入高度列表之中;
this.content_ele_offset_top_list.push(coords.top);
return coords;
}.bind(this))
// 获取最小高度值;
var _length = this.content_ele_offset_top_list.length ;
this.min_top = this.content_ele_offset_top_list[0];
this.max_top = this.content_ele_offset_top_list[_length - 1] + $(this.options.content_selector).last().height();
this.content_ele_offset_top_list.push(this.max_top);
this.bindEvent();
},
bindEvent:function(){
var $body_html = $("body,html");
// 保存实例对象的指针;
// var _this = this;
var instance = this;
// 高频执行的scroll事件;
// 优化 : 节流 ;
$(document).scroll( function(){
var scrollTop = $body_html.scrollTop();
this.calStairsIndex(scrollTop);
}.bind(this))
$(this.options.stairs_selector).click(function(){
// 知道当前发生事件的元素是谁; this; 因为这jQuery事件绑定处理没有办法，在外部传入当前发生事件的元素; 这个this不能变;
// 当前的实例对象是谁; this;
var index = $(this).index(instance.options.stairs_selector);
instance.changeScrollTop(index);
})
},
// 计算当前楼层;
calStairsIndex : function( st ){
// 没有到达楼梯区域进行隔离;
if(st < this.min_top || st > this.max_top){
// console.log(-1);
this.index = -1;
this.changeStairsBtn();
return false
};
// 如果还在范围之内不用继续判断;
var _list = this.content_ele_offset_top_list;
// 如果 st 还在当前index 范围之内则不继续进行查找;
if(st >= _list[this.index] && st < _list[this.index + 1]){
return false;
}
// 遍历 ;
for(var i = 0 ; i < _list.length ; i ++){
if(st >= _list[i] && st < _list[i + 1]){
this.index = i;
break;
}
}
this.changeStairsBtn();
},
changeStairsBtn : function(){
if(this.index === -1){
$(this.options.stairs_selector).removeClass("active");
return false;
}
$(this.options.stairs_selector).eq(this.index).addClass("active")
.siblings()
.removeClass("active");
},
changeScrollTop : function( index ){
$("body,html").scrollTop(this.content_ele_offset_top_list[index]);
// 事件触发器;
$(document).trigger("scroll");
}
}
var staris = new Stairs({
content_selector : ".content",
stairs_selector : ".stairs-list li"
});
console.log(staris);
</script>
</body>
</html>
现在，我们也能实现跟它一样的功能效果了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于JavaScript实现div层跟随滚动条滑动
在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置 效果展示如下所示: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavScript页面悬浮框- 何问起</title><base target="_blank" /> <
-
jQuery仿京东商城楼梯式导航定位菜单
实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项! 涉及知识点:find().parent().offset().scroll()等jQ函数,请自觉复习各种函数! html代码: <!-- 导航菜单 --> <div id="menu"> <ul> <li>1F<span>服饰</span></li> <li>2F<span>美妆</span></
-
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
本文实例总结了javascript运动效果实现与用法.分享给大家供大家参考,具体如下: 一.图片放大缩小效果: <!doctype html> <html> <head> <meta charset="utf-8"> <title>图片放大缩小</title> <style> *{ margin:0; padding:0; list-style:none;} #ulList{ margin:50px;}
-
js实现鼠标滑动到某个div禁止滚动
本文实例为大家分享了js实现鼠标滑动到某个div禁止滚动的具体代码,供大家参考,具体内容如下 项目中碰到一个场景就是当鼠标滑倒某个div的时候,滑动鼠标页面不再滚动. 这里主要是当鼠标滑动到该div时,监听滚轮事件并通过preventDefault()事件来阻止滚动事件,以下是例子 eg: #wrap { position:absolute; top:200px; background:#000000; font-size: 40px; width:50vw; text-align: cente
-
js实现分享到随页面滚动而滑动效果的方法
本文实例讲述了js实现分享到随页面滚动而滑动效果的方法.分享给大家供大家参考.具体如下: 页面向上向下滚动,分享到的模块随着滑动. 要点: 复制代码 代码如下: var scrtop =document.documentElement.scrollTop||document.body.scrollTop; var height = document.documentElement.clientHeight||document.body.clientHeight; var top = scrtop
-
jQuery滚动监听实现商城楼梯式导航效果
话不多说,上局部效果图: html结构,左侧定位的导航需要一个ul,中间内容,我是直接截得图片,为了效果省事,也是用的ul,最后你们要用的话也可以用ul,或者div,但是每个区域得是一个div,例如,精选的放一个div,女装的放一个div,所有的区域都套在一个大的div里面,也就是类似于ul>li的结构(只提供html结构和jQuery,样式的话根据设计稿): <div class="menu"> <ul> <li class="on&qu
-
jquery实现滑动楼梯效果
本文实例为大家分享了jquery实现滑动楼梯效果的具体代码,供大家参考,具体内容如下 思路:鼠标滚动的时候页面跟随变化,点击模块时候,实现指哪打哪效果 代码的实现 1.html和css代码 <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li{ padding: 0; mar
-
JavaScript实现楼梯滚动特效(jQuery实现)
想必大家都用过JD,在它的首页里面有个很常见的特性:就是 楼梯特效 . 对于程序员的我们,可以说是万物皆可盘.那么,我们就来盘一下它. 先上要实现的效果图: 效果功能描述:当点击右侧悬浮的按钮时,点击相应模块,左侧内容区域会自动跳转到该模块区域. 下面,上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&q
-
JavaScript实现的滚动公告特效【基于jQuery】
本文实例讲述了JavaScript实现的滚动公告.分享给大家供大家参考,具体如下: 今天给大家分享一篇滚动公告的特效. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动公告</title> <script src="http://libs.baidu.com/jque
-
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
JavaScript实现仿新浪微博大厅和未登录腾讯微博首页滚动效果,貌似这些天有不少朋友需要这功能,前几天已经发了几个了,不过那一个效果是用jquery实现的<jQuery向上循环滚动(仿新浪微博未登录首页滚动微博显示)>,今天发现这款是js制作的好,不敢独享,希望需要的朋友喜欢哦. 效果图展示如下: 查看演示 源码下载 html代码 <div class="wp"> <ul id="slider" class=&quo
-
jQuery满屏焦点图左右滚动特效代码分享
本文实例讲述了jQuery横向擦除焦点图特效.分享给大家供大家参考.具体如下: jQuery焦点图是一款满屏左右滚动,带左右按钮,带缩略图,支持自动轮播的焦点图代码. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery满屏焦点图左右滚动特效代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
-
高效的jquery数字滚动特效
本文实例讲述了基于jquery数字滚动特效的代码,分为四种情况分享给大家供大家参考,具体如下: 有分隔符,有小数点:<div class="numberRun"></div> <br><br> 只有分隔符:<div class="numberRun2"></div> <br><br> 只有小数点:<div class="numberRun3"&g
-
jQuery合作伙伴左右滚动特效
本文实例讲述了jQuery合作伙伴左右滚动特效,分享给大家供大家参考.具体如下: 一款基于jQuery合作伙伴左右滚动特效代码,是一款带左右箭头及自动滚动友情链接合作伙伴左右滚动网页特效,鼠标滑过停止自动滚动,鼠标离开自动滚动,点击左右按钮左右滚动Logo切换网页特效.可用于网站底部作为合作伙伴展示或友链展示的特效,是一款非常优秀的特效源码. 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行
-
jQuery插件实现无缝滚动特效
首先来看下html骨架,如下: <div class="box"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> 结构简单明了,没什么说的. 讲下实现原理: div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出b
-
jQuery实现图片左右滚动特效
本文实例讲述了jQuery合作伙伴左右滚动特效,分享给大家供大家参考,具体如下: 一款基于jQuery合作伙伴左右滚动特效代码,是一款带左右箭头及自动滚动友情链接合作伙伴左右滚动网页特效,鼠标滑过停止自动滚动,鼠标离开自动滚动,点击左右按钮左右滚动Logo切换网页特效.可用于网站底部作为合作伙伴展示或友链展示的特效,是一款非常优秀的特效源码. 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行
-
jQuery实现锚点向下平滑滚动特效示例
实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ window.location.hash = hash; }); 简单实例代码: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.
-
JavaScript实现垂直向上无缝滚动特效代码
一.循环向上滚动的文字,如上面的滚动效果 二.实现的思路 1.建立三个层dome.dome1.dome2 2.垂直滚动的文字在dome1上 3.通过层的滚动来实现文字滚动 三.源代码 <html> <head> <title>循环向上滚动的文字</title> <link href="css/scrollTop.css" rel="stylesheet" type="text/css" /&g