javaScript蓝桥杯---传送门

这篇具有很好参考价值的文章主要介绍了javaScript蓝桥杯---传送门。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、介绍

日常浏览网页的时候,我们会发现一个问题,当页面太长、内容太多的时候我们很难快速浏览到心仪的内容。为了解决这个烦恼,优秀的产品研发团队发明了一种类似传送门的功能,以便用户能通过它快速定位到感兴趣的内容。这个功能也被通俗地比喻为“电梯”。

本题需要在已提供的基础项目中使用 JS/jQuery 等知识完善代码,最终实现该功能。

二、准备

开始答题前,需要先打开本题的项目文件夹,目录结构如下:

├── 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 文件。

在浏览器中预览 index.html 页面,显示如下所示:
javaScript蓝桥杯---传送门

三、目标

请在 js/index.js 文件中补全代码,最终实现传送门的功能。

具体需求如下:

  1. 点击页面侧边的顶部、中间或底部按钮,页面滚动到顶部、中间或底部对应的范围内。这三个范围的设定如下:
    • 顶部:滚动条距离页面顶部 0 ~ 960px(不包含 960)的范围。
    • 中间:滚动条距离页面顶部 960 ~ 1920px(包含 960,不包含 1920)的范围。
    • 底部:滚动条距离页面顶部大于等于 1920px 的范围。
  2. 当页面滚动到顶部、中间或底部位置时,对应的侧边按钮(即,顶部、中间或底部按钮)添加激活样式(即 .active-color),其余按钮样式变为默认(即 .default-color)。

完成后的效果见文件夹下面的 gif 图,图片名称为 effect.gif(提示:可以通过 VS Code 或者浏览器预览 gif 图片)。
javaScript蓝桥杯---传送门

四、代码

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>传送门</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
  </head>
  <body>
    <div id="top"></div>
    <div id="middle"></div>
    <div id="foot"></div>
    <div id="lift">
      <a class="default-color active-color" onclick="toFunction.call(this,0)"
        >顶部</a
      >
      <span class="line"></span>
      <a class="default-color" onclick="toFunction.call(this,960)">中间</a>
      <span class="line"></span>
      <a class="default-color" onclick="toFunction.call(this,2000)">底部</a>
    </div>
    <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
  </body>
</html>

css/style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #f4f4f4;
}
a {
  cursor: pointer;
}
#top {
  width: 1000px;
  height: 960px;
  margin: 0 auto;
  background: url(../images/bg.png) no-repeat;
  background-size: cover;
}
#middle {
  width: 1000px;
  height: 960px;
  margin: 0 auto;
  background: url(../images/bg.png) no-repeat;
  background-size: cover;
  background-position: 0 -961px;
}
#foot {
  width: 1000px;
  height: 1020px;
  margin: 0 auto;
  background: url(../images/bg.png) no-repeat;
  background-size: cover;
  background-position: 0 -1921px;
}
#lift {
  width: 78px;
  height: 300px;
  background-color: white;
  position: fixed;
  right: 0;
  bottom: 100px;
  text-align: center;
  top: 50%;
  margin-top: -150px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
#lift a {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.line {
  display: block;
  width: 50%;
  height: 1px;
  margin: 0 auto;
  background-color: gainsboro;
}
.default-color {
  color: #333;
}
.active-color {
  color: #2e7eee;
}

js/index.js文章来源地址https://www.toymoban.com/news/detail-478602.html

$(window).scroll(function () {
  // 页面滚动到指定范围,对应的侧边按钮字体变色
  // TODO:请补充代码实现功能
});

/**
 * @param {Object} scrollTopVal:到达指定位置需要滚动的高度
 * 点击按钮,滚动到指定位置
 */
function toFunction(scrollTopVal) {
  // TODO:请补充代码实现功能
}

images/bg.png
javaScript蓝桥杯---传送门

五、知识点

  1. window.pageYoffset 可以获取scroll的y轴
  2. window.pageXoffset 可以获取scroll的x轴
  3. 本题已设置了scroll监听,如果用js原生 也有个scroll事件可以监听滚动
  4. window.scrollTo(x,y)可以瞬间移动scroll

六、完成

js/index.js

const list = document.getElementsByTagName("a");
$(window).scroll(function () {
  // 页面滚动到指定范围,对应的侧边按钮字体变色
  // TODO:请补充代码实现功能
  clearActive();
  if (0 <= window.pageYOffset && window.pageYOffset < 960) {
    list[0].classList.add("active-color");
  } else if (window.pageYOffset < 1920) {
    list[1].classList.add("active-color");
  } else {
    list[2].classList.add("active-color");
  }
});
function clearActive() {
  for (var i = 0; i < list.length; i++) {
    list[i].classList.remove("active-color");
  }
}
/**
 * @param {Object} scrollTopVal:到达指定位置需要滚动的高度
 * 点击按钮,滚动到指定位置
 */
function toFunction(scrollTopVal) {
  // TODO:请补充代码实现功能
  window.scrollTo(0,scrollTopVal)
}

到了这里,关于javaScript蓝桥杯---传送门的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【摸鱼日常】使用Docker部署RPG网页小游戏

    本次实践部署环境为个人测试环境,快速使用docker部署RPG网页小游戏。  本次实践环境规划: 启动镜像后的名字 IP地址 容器镜像版本 操作系统版本 games 192.168.20.8 latest ubuntu 22.04 检查Docker服务状态,确保Docker服务正常运行。 使用docker-cli快速创建RPG网页小游戏的容器。 访问

    2024年02月20日
    浏览(44)
  • 关于浏览器下载的时候出现失败,网络错误

    我试过所有浏览器,谷歌,firefox,qq浏览器,还是edge都不好使, 1.看网上说是http debugger的问题,但是我没有找到这个服务项 2.也有说可以通过修改或设置下载路径解决 --------  我通过下载一个叫xdm的软件,也就是类似迅雷这种软件,嵌在浏览器上作为插件,感觉没有出现中断

    2024年01月19日
    浏览(45)
  • 【记录日常】解决Mac电脑能联网但是浏览器显示无法连接网络的问题

    问题描述: 微信、qq等软件都能联网,但是使用Chrome、Safari打开都显示无法连接网络。 尝试后仍然没成功的方法: 1.忘记当前网络,重新连接wifi 2.重启电脑 3.重新修改dns 解决的方式: 后来是看到Chrome的提示,关闭代理,尝试后解决。 路径:选择“网络偏好设置”——“高

    2024年02月12日
    浏览(80)
  • elementui table 在浏览器分辨率变化的时候界面异常

    界面显示不完整, 表格卡顿,界面已经刷新完成,但是表格的宽度还在一点一点变化,甚至有无线延伸的情况  1. 使用doLayout 这里官方文档有说明, 所以我的想法是,监听浏览器的resize事件,然后执行doLayout 方法。 结果是: 偶尔可以解决,偶尔又出现了,,,四舍五入等于

    2024年02月11日
    浏览(49)
  • javaScript蓝桥杯----猜硬币

    为了打发无聊的时间,小蓝开发了一款人机对战的猜硬币游戏,页面中一共有 9 个杯子,系统会随机挑选 3 个杯子在里面放入硬币,玩家通过输入含有杯子序号的字符串进行猜选,但是遇到了一些问题。 本题需要你帮助小蓝完成猜硬币游戏。 开始答题前,需要先打开本题的

    2024年02月08日
    浏览(36)
  • javaScript蓝桥杯-----芝麻开门

    在阿里巴巴和四十大盗的故事中,阿里巴巴因为无意中知道了开门的咒语人生发生了翻天覆地的变化,四十大盗也因为咒语的泄露最终丧命。芝麻开门的咒语作为重要的信息推动着故事的发展。下面由你来为门设置这道机关,输入芝麻开门后才能放行。 本题已经内置了初始代

    2024年02月07日
    浏览(38)
  • javaScript蓝桥杯---新增地址

    网购大家应该再熟悉不过,网购中有个很难让人忽略的功能就是地址管理,接下来就让我们通过完善代码来探索下地址管理中常用功能的实现吧~ 本题需要在已提供的基础项目中使用 JS 知识完善代码,最终实现需求中的具体功能。 开始答题前,需要先打开本题的项目代码文

    2024年02月08日
    浏览(36)
  • JavaScript蓝桥杯------学海无涯

    小蓝最近一直在云课平台学习,为了更好的督促自己,于是将每天的学习时间都记录了下来,但是如何更加直观的显示学习时间让小蓝很是苦恼。本题需要你使用 ECharts 帮助小蓝实现统计学习时间图表。 本题已经内置了初始代码,打开实验环境,目录结构如下: 其中: ind

    2024年02月07日
    浏览(30)
  • javaScript蓝桥杯----绝美宋词

    “今宵酒醒何处,杨柳岸晓风残月”,“蓦然回首,那人却在灯火阑珊处”,“试问闲愁都几许?一川烟草,满城风絮,梅子黄时雨” … 宋词可谓是古代文学桂冠上一颗璀璨的明珠,本题将实现一个在搜索框中输入,实时显示符合条件的完整宋词的功能。 本题已经内

    2024年02月07日
    浏览(34)
  • javaScript蓝桥杯-----宝贵的一票

    公司经常举办各种活动,但一到投票环节就犯了难,于是公司决定安排小蓝开发一个投票系统,更好的收集大家的投票信息。为了赶在下一次活动开始前上线,小蓝正在马不停蹄的赶工中,请你也来帮助小蓝完成部分功能吧。 本题已经内置了初始代码,打开实验环境,目录结

    2024年02月07日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包