js实现页面导航层级指示效果
我们上网经常看到一些页面层级指示的效果，比如淘宝、京东、百度百科等，用于指示用户浏览页面到哪里了。可以起到很好的交互效果，现在我们就来自己去实现以下类似的效果。主要用到的API是scrollIntoView 和 getBoundingClientRect方法，原理是监听页面滚动元素，当元素距离到浏览器视口一定的位置的时候就证明元素开始出现在页面的视口，就可以标识右边的指示栏。
代码如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>H5 canvas绘制框选截图和保存截图代码</title>
<style>
*{padding:0;margin:0;}
#scrollBox{margin:0 auto;width:1000px;}
#scrollBox .scroll-tips{position:fixed;right:10px;top:300px;width:100px;}
#scrollBox .scroll-tips li {cursor:pointer;text-align:center;}
#scrollBox .scroll-tips li.active {background:#ccc;}
#scrollBox .ct {height: 550px;line-height:550px;text-align:center;font-size:40px;color:#fff;background:green;}
</style>
</head>
<body>
<div id="scrollBox">
<div class="main">
<div class="content">
<h2 id="title1" class="title-bar" data-id="1">标题1</h2>
<div class="ct">内容1</div>
</div>
<div class="content">
<h2 id="title2" class="title-bar" data-id="2">标题2</h2>
<div class="ct" style="height:847px;">内容2</div>
</div>
<div class="content">
<h2 id="title3" class="title-bar" data-id="3">标题3</h2>
<div class="ct" style="height:547px;">内容3</div>
</div>
<div class="content">
<h2 id="title4" class="title-bar" data-id="4">标题4</h2>
<div class="ct" style="height:427px;">内容4</div>
</div>
<div class="content">
<h2 id="title5" class="title-bar" data-id="5">标题5</h2>
<div class="ct" style="height:187px;">内容5</div>
</div>
<div class="content">
<h2 id="title6" class="title-bar" data-id="6">标题6</h2>
<div class="ct" style="height:232px;">内容6</div>
</div>
</div>
<div class="scroll-tips">
<ul>
<li id="Li1" class="active" data-id="1">标题1</li>
<li id="Li2" data-id="2">标题2</li>
<li id="Li3" data-id="3">标题3</li>
<li id="Li4" data-id="4">标题4</li>
<li id="Li5" data-id="5">标题5</li>
<li id="Li6" data-id="6">标题6</li>
</ul>
</div>
</div>
<script>
let Li = $$('.scroll-tips li');
let scrollTips = $$('.title-bar');
function $$(str) {
return document.querySelectorAll(str);
};
for (let i = 0, len = Li.length; i < len; i++) {
// 点击右侧标识点左侧滚动到窗口显示位置
Li[i].onclick = function () {
let id = this.getAttribute('data-id');
$$('.scroll-tips li.active')[0].classList.remove('active');
this.classList.add('active');
$$('#title' + id)[0].scrollIntoView();
};
};
// 获取当前页面滚动到浏览器视口顶部位置的元素
const getScrollTop = function (domArr) {
for (let i = 0, len = domArr.length; i < len; i++) {
let top = domArr[i].getBoundingClientRect().top;
// 表示在一定范围内允许的值
if (top >= 0 && top <= 30) {
return domArr[i];
}
}
};
// 监听滚动方法
window.onscroll = function () {
let LiId = getScrollTop(scrollTips) && getScrollTop(scrollTips).getAttribute('data-id');
if (LiId) {
$$('.scroll-tips li.active')[0].classList.remove('active');
$$('#Li' + LiId)[0].classList.add('active');
}
};
</script>
</body>
</html>
运行结果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS仿hao123导航页面图片轮播效果
hao123网站大家都很熟悉吧,具体的效果不用我多说吧,感兴趣的朋友可以去参考效果图,下面小编给大家分享下实现代码思路,当然大家可以根据需求适当的添加修改删除代码. 关键代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ wi
-
Javascript实现页面滚动时导航智能定位
常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域. 假设结构如下: <div class="container"> <div class="wrapper"> <div class="section" id="section1">section1</div> <di
-
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
需要使用vue做一个专题页面.滚动页面指定区域导航高亮. 监听滚动页面事件,对比当前页面的位置与元素的位置,如果当前滚动的区域位置大于元素的位置,导航添加class,其他去掉class进行样式切换. 我使用的方法是在定位元素上添加id,在导航添加data-id属性,监听滚动事件,如果当前滚动区域大于定位元素区域,将元素的id赋值给变量,然后与导航的data-id进行匹配,切换class. html结构 main.vue <template> <div class="qz-hom
-
js实现页面导航层级指示效果
我们上网经常看到一些页面层级指示的效果,比如淘宝.京东.百度百科等,用于指示用户浏览页面到哪里了.可以起到很好的交互效果,现在我们就来自己去实现以下类似的效果.主要用到的API是scrollIntoView 和 getBoundingClientRect方法,原理是监听页面滚动元素,当元素距离到浏览器视口一定的位置的时候就证明元素开始出现在页面的视口,就可以标识右边的指示栏. 代码如下: <!DOCTYPE html> <head> <meta http-equiv=&quo
-
使用原生js实现页面蒙灰(mask)效果示例代码
对于web应用开发者,当用户进行界面浏览时如果后台程序处理程序时间较长,那么用户在网页的等待时间会较长,但是如果页面上没有一个比较友好的提示方式 (增加蒙灰效果),那么用户体验会不是特别良好,用户不知道现在是不是应该点击别的程序,用户并不知道是不是应该继续等待网页,还是可以点击别的页面. 现在就有一个比较良好的交互,就是增加蒙灰效果.像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果,当然jquery也提供了这种蒙灰方法.在此作者希望自己也能够 使用原生的js实现自己的蒙灰
-
js给页面加style无效果的解决方法
今天做项目时遇到一个问题,我的a.jsp引入了b.jsp,c.jsp也引入了b.jsp,而b.jsp里面的style是根据引入的不同动态改变的(在a.jsp.c.jsp中写js改变).网上找了好多代码,试了很多次,都没有效果.后来,看到了这段代码,document.getElementById("aa").style.cssText="background:#1175d9;";(cssText=""引号里面可以加自己需要的样式),解决了我的问题.
-
jQuery+css实现百度百科的页面导航效果
这周不小心看到了百度百科的页面导航效果,感觉挺不错的,周末抽空写了下. 下图为导航部分的效果图: css和图片都是抄百度的,可从百度百科下载. 具体的代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet"
-
JS实现分页导航效果
前言 最近的项目需要添加一个分页导航的功能,没有用网上封装好的文件.通过JS自己简单实现了效果.下面和大家分享一下. 内容 下图为首次加载后的效果,默认显示5页, 当点击下一页时将选中页面的页码置于中间 下面让我们来看看实现的代码 第一部分是在页面显示内容的处理 function SetListPage() { $.ajax({ type: "GET", url: "ajax/PhoneList.ashx?", datatype: 'json', success:
-
使用html+js+css 实现页面轮播图效果(实例讲解)
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=
-
js实现同一页面多个运动效果的方法
本文实例讲述了js实现同一页面多个运动效果的方法.分享给大家供大家参考.具体分析如下: 实现原理,就是在调用的时候,给这五个元素,循环加上事件.需要注意的是,每个元素的定时器需要分开. 要点一: var speed = (target - obj.offsetWidth)/8; 缓冲运动效果,一开始速度很快,然后越来越慢,直到停止 speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果速度大于0,则向上取整,如果速度小于0,则向下取整. 要点
-
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
本文实例讲述了JS+CSS实现带有碰撞缓冲效果的竖向导航条代码.分享给大家供大家参考.具体如下: 这是一款碰撞缓冲效果的导航条,JavaScript妙味课堂奉献给大家的作品,很不错的竖向菜单,希望大家喜欢.所用技术是JS和CSS. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-pzxg-r-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
-
JS实现页面载入时随机显示图片效果
本文实例讲述了JS实现页面载入时随机显示图片效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS 随机图片效果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- img { b