admin管理员组文章数量:1037775
【JS/jQuery——功能实现】传送门（蓝桥杯真题
背景介绍
日常浏览网页的时候，我们会发现一个问题，当页面太长、内容太多的时候我们很难快速浏览到心仪的内容。为了解决这个烦恼，优秀的产品研发团队发明了一种类似传送门的功能，以便用户能通过它快速定位到感兴趣的内容。这个功能也被通俗地比喻为“电梯”。 本题需要在已提供的基础项目中使用 JS/jQuery 等知识完善代码，最终实现该功能。
准备步骤
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
代码语言：javascript代码运行次数：0运行复制├── effect.gif
├── index.html
├── css
├── images
└── js
├── index.js
└── jquery-3.6.0.min.js其中：
effect.gif是最终实现的效果图。index.html是主页面。css是样式文件夹。images是素材图片文件夹。js/index.js是需要补充代码的 js 文件。js/jquery-3.6.0.min.js是 jQuery 文件。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
代码语言：javascript代码运行次数：0运行复制cd /home/project
wget .zip && unzip 01.zip && rm 01.zip在浏览器中预览 index.html 页面
目标效果
请在
js/index.js文件中补全代码，最终实现传送门的功能。 具体需求如下：
- 点击页面侧边的顶部、中间或底部按钮，页面滚动到顶部、中间或底部对应的范围内。这三个范围的设定如下：
- 顶部：滚动条距离页面顶部 0 ～ 960px（不包含 960）的范围。
- 中间：滚动条距离页面顶部 960 ～ 1920px（包含 960，不包含 1920）的范围。
- 底部：滚动条距离页面顶部大于等于 1920px 的范围。
- 当页面滚动到顶部、中间或底部位置时，对应的侧边按钮（即，顶部、中间或底部按钮）添加激活样式（即 **
.active-color**），其余按钮样式变为默认（即 **.default-color**）。
完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。
要求规定
- 请勿修改
js/index.js文件外的任何内容。 - 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。
判分标准
- 实现点击侧边按钮快速定位内容功能，得 2 分。
- 实现侧边按钮文字颜色随页面内容滚动而变化功能，得 3 分。
通关代码✔️
代码语言：javascript代码运行次数：0运行复制$(window).scroll(function () {
// 页面滚动到指定范围，对应的侧边按钮字体变色
// TODO：请补充代码实现功能
var scrollTopValue = document.documentElement.scrollTop
var index
if(scrollTopValue>= 0 && scrollTopValue < 959){index = 0}
if(scrollTopValue>= 960 && scrollTopValue < 1920){index = 1}
if(scrollTopValue> 1920 && scrollTopValue < Infinity){index = 2}
jQuery(".default-color").eq(index).addClass('active-color').siblings().removeClass('active-color');
});
/**
* @param {Object} scrollTopVal：到达指定位置需要滚动的高度
* 点击按钮，滚动到指定位置
*/
function toFunction(scrollTopVal) {
// TODO：请补充代码实现功能
document.documentElement.scrollTop=scrollTopVal
}代码解析【JS/jQuery——功能实现】传送门（蓝桥杯真题
背景介绍
日常浏览网页的时候，我们会发现一个问题，当页面太长、内容太多的时候我们很难快速浏览到心仪的内容。为了解决这个烦恼，优秀的产品研发团队发明了一种类似传送门的功能，以便用户能通过它快速定位到感兴趣的内容。这个功能也被通俗地比喻为“电梯”。
本题需要在已提供的基础项目中使用 JS/jQuery 等知识完善代码，最终实现该功能。
准备步骤
日常浏览网页的时候，我们会发现一个问题，当页面太长、内容太多的时候我们很难快速浏览到心仪的内容。为了解决这个烦恼，优秀的产品研发团队发明了一种类似传送门的功能，以便用户能通过它快速定位到感兴趣的内容。这个功能也被通俗地比喻为“电梯”。 本题需要在已提供的基础项目中使用 JS/jQuery 等知识完善代码，最终实现该功能。
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
代码语言：javascript代码运行次数：0运行复制├── effect.gif
├── index.html
├── css
├── images
└── js
├── index.js
└── jquery-3.6.0.min.js其中：
effect.gif是最终实现的效果图。index.html是主页面。css是样式文件夹。images是素材图片文件夹。js/index.js是需要补充代码的 js 文件。js/jquery-3.6.0.min.js是 jQuery 文件。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
代码语言：javascript代码运行次数：0运行复制cd /home/project
wget .zip && unzip 01.zip && rm 01.zip在浏览器中预览 index.html 页面
目标效果
请在
js/index.js文件中补全代码，最终实现传送门的功能。 具体需求如下：
- 点击页面侧边的顶部、中间或底部按钮，页面滚动到顶部、中间或底部对应的范围内。这三个范围的设定如下：
- 顶部：滚动条距离页面顶部 0 ～ 960px（不包含 960）的范围。
- 中间：滚动条距离页面顶部 960 ～ 1920px（包含 960，不包含 1920）的范围。
- 底部：滚动条距离页面顶部大于等于 1920px 的范围。
- 当页面滚动到顶部、中间或底部位置时，对应的侧边按钮（即，顶部、中间或底部按钮）添加激活样式（即 **
.active-color**），其余按钮样式变为默认（即 **.default-color**）。
完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。
要求规定
- 请勿修改
js/index.js文件外的任何内容。 - 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。
判分标准
- 实现点击侧边按钮快速定位内容功能，得 2 分。
- 实现侧边按钮文字颜色随页面内容滚动而变化功能，得 3 分。
通关代码✔️
代码语言：javascript代码运行次数：0运行复制$(window).scroll(function () {
// 页面滚动到指定范围，对应的侧边按钮字体变色
// TODO：请补充代码实现功能
var scrollTopValue = document.documentElement.scrollTop
var index
if(scrollTopValue>= 0 && scrollTopValue < 959){index = 0}
if(scrollTopValue>= 960 && scrollTopValue < 1920){index = 1}
if(scrollTopValue> 1920 && scrollTopValue < Infinity){index = 2}
jQuery(".default-color").eq(index).addClass('active-color').siblings().removeClass('active-color');
});
/**
* @param {Object} scrollTopVal：到达指定位置需要滚动的高度
* 点击按钮，滚动到指定位置
*/
function toFunction(scrollTopVal) {
// TODO：请补充代码实现功能
document.documentElement.scrollTop=scrollTopVal
}代码解析
本文标签： JSjQuery功能实现传送门（蓝桥杯真题
版权声明：本文标题：【JSjQuery——功能实现】传送门（蓝桥杯真题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/jiaocheng/1748268168a2277485.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论