从零开始学习 JS APL(七):实例解析关于京东案例头部案例和放大镜效果!!

大家好关于JS APl 知识点已经全部总结了,第七部部分全部都是案例部分呢!!(素材的可以去百度网盘去下载!!!) 

目录

前言

一、个人实战文档

放大镜效果

思路分析:

 关于其它模块一个:

返回顶部模块

总结


前言

欢迎来到JSAPL(JavaScript Algorithms and Data Structures Projects)学习项目!这个项目旨在为学习JavaScript算法和数据结构提供一个实践平台。通过完成这些项目,您将掌握常见的算法和数据结构,并学会如何用JavaScript实现它们。无论您是初学者还是有经验的开发人员,JSAPL将为您提供有趣和具有挑战性的练习,帮助您建立自己的算法和数据结构知识库。加入我们,享受学习的过程!提示:以下是本篇文章正文内容,下面案例可供参考

一、个人实战文档

需求:

  1. 顶部导航开始不显示

  2. 等页面滑到主导航栏,这个新顶部导航栏滑动下拉显示,并且改为固定定位

  3. 等页面滑到上面,新顶部导航栏隐藏

放大镜效果

 

 

需求:

①:鼠标经过对应小盒子,左侧中等盒子显示对应中等图片

②: 鼠标经过中盒子,右侧会显示放大镜效果的大盒子

③: 黑色遮罩盒子跟着鼠标来移动

④: 鼠标在中等盒子上移动,大盒子的图片跟着显示对应位置

给大家说一下关于做放大镜的效果的一个思路 (后面我纤细出教程!!):

思路分析:

①:鼠标经过小盒子,左侧中等盒子显示对应中等图片

  1. 获取对应的元素

  2. 采取事件委托的形式,监听鼠标经过小盒子里面的图片, 注意此时需要使用 mouseover 事件,因为需要事件冒泡触发small

  3. 让鼠标经过小图片的爸爸li盒子,添加类,其余的li移除类(注意先移除,后添加)

  4. 鼠标经过小图片,可以拿到小图片的src, 可以做两件事

    • 让中等盒子的图片换成这个 这个小图片的src

    • 让大盒子的背景图片,也换成这个小图片的 src (稍后做)

②: 鼠标经过中等盒子,右侧大盒子显示 

  1. 用到鼠标经过和离开,鼠标经过中盒子,大盒子 利用 display 来显示和隐藏

  2. 鼠标离开不会立马消失,而是有200ms的延时,用户体验更好,所以尽量使用定时器做个延时 setTimeout

  3. 显示和隐藏也尽量定义一个函数,因为鼠标经过离开中等盒子,会显示隐藏,同时,鼠标经过大盒子,也会显示和隐藏

  4. 给大盒子里面的背景图片一个默认的第一张图片

        

③: 黑色遮罩盒子跟着鼠标来移动

  1. 先做鼠标经过 中等盒子,显示隐藏 黑色遮罩 的盒子

  2. 让黑色遮罩跟着鼠标来走, 需要用到鼠标移动事件 mousemove

  3. 让黑色盒子的移动的核心思想:不断把鼠标在中等盒子内的坐标给黑色遮罩层 let top 值,这样遮罩层就可以跟着移动了

    • 需求

      • 我们要的是 鼠标在 中等盒子内的坐标, 没有办法直接得到

      • 得到1: 鼠标在页面中的坐标

      • 得到2: 中等盒子在页面中的坐标

    • 算法

      • 得到鼠标在页面中的坐标 利用事件对象的 pageX

      • 得到middle中等盒子在页面中的坐标 middle.getBoundingClientRect()

      • 鼠标在middle 盒子里面的坐标 = 鼠标在页面中的坐标 - middle 中等盒子的坐标

      • 黑色遮罩层不断得到 鼠标在middle 盒子中的坐标 就可以移动起来了

      注意 y坐标特殊,需要减去 页面被卷去的头部

      为什么不用 box.offsetLet 和 box.offsetTop 因为这俩属性跟带有定位的父级有关系,很容被父级影响,而getBoundingClientRect() 不受定位的父元素的影响

    • 限定遮罩的盒子只能在middle 内部移动,需要添加判断

      • 限定水平方向 大于等于0 并且小于等于 400

      • 限定垂直方向 大于等于0 并且小于等于 400

    • 遮罩盒子移动的坐标:

      • 声明一个 mx 作为移动的距离

      • 水平坐标 x 如果 小于等于100 ,则移动的距离 mx 就是 0 不应该移动

      • 水平坐标 如果 大于等于100 并且小于300,移动的距离就是 mx - 100 (100是遮罩盒子自身宽度的一半)

      • 水平坐标 如果 大于等于300,移动的距离就是 mx 就是200 不应该在移动了

      • 其实我们发现水平移动, 就在 100 ~ 200 之间移动的

      • 垂直同理

接下来就是公式直接复制就可以如果有什么没懂可以私信我我后期也会出教程:

let mx = 0, my = 0;
if (x <= 100) mx = 0
if (x > 100 && x < 300) mx = x - 100
if (x >= 300) mx = 200if (y <= 100) my = 0
if (y > 100 && y < 300) my = y - 100
if (y >= 300) my = 200
  • 大盒子图片移动的计算方法:

    • 中等盒子是 400px(这个是我的盒子大小) 大盒子 是 800px 的图片(这个是我的盒子大小)

    • 中等盒子移动1px, 大盒子就应该移动2px, 只不过是负值

 

large.style.backgroundPositionX = - 2 * mx + 'px'
large.style.backgroundPositionY = - 2 * my + 'px'

以上结束关于京东放大镜的效果

 关于其它模块一个:

tab栏切换的案例 

 

选择哪个,哪个显示高亮!! 

 

 这个就是鼠标滑动盒子的宽度变宽就行 

 

点击叉号关闭广告!! 

返回顶部模块

页面滚动底部,可以出现一个侧边栏,点击返回顶部,可以返回顶部


总结

综合案例项目要求您运用所学的JavaScript算法和数据结构知识,包括数组、对象、字符串、链表、堆栈和队列等等。在创建应用程序时,您可以选择使用任何一种数据结构和算法来实现所需的功能。 

JSAPL综合案例提供了一个极佳的机会,让您将所学的技能付诸实践,并展示您的编程技能。无论您是初学者还是有经验的开发人员,这个项目都将为您带来更深刻的编程理解和经验。

 给一个下载素材的地址:

链接:https://pan.baidu.com/s/143kFp1d3vS-YUWL9s4c4ew?pwd=1233 提取码:1233

下载完记得点个关注!!

以上就是关于JavaScript APl一个七个部分所有知识点的一个总结!!!*(以上模块我会陆续出详细教程!!!!) 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/202000.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode算法题解(动态规划)|LeetCode583. 两个字符串的删除操作、LeetCode72. 编辑距离

一、LeetCode583. 两个字符串的删除操作 题目链接&#xff1a;583. 两个字符串的删除操作 题目描述&#xff1a; 给定两个单词 word1 和 word2 &#xff0c;返回使得 word1 和 word2 相同所需的最小步数。 每步 可以删除任意一个字符串中的一个字符。 示例 1&#xff1a; …

固态硬盘的优势是什么?

固态硬盘的优势是什么&#xff1f; 1、重量轻体积小。固态硬盘相比机械硬盘在体积上更小&#xff0c;重量更轻。一般来说&#xff0c;台式机的机械硬盘的尺寸在3.5英寸&#xff0c;而SATA接口的固态硬盘的尺寸仅有2.5英寸&#xff0c;而M.2接口的固态硬盘体积更小&#xff0c;只…

听力长难句

[ 01 ] Usually, when we think of DNA, we think of the DNA Thats in cells nucleus, but in fact a cell mitochondrion also contains DNA. In this particular situation, mitochondrial DNA analysis made more sense than nuclear DNA analysis. 翻译&#xff1a; 通…

新手管理者有哪些需要学习的内容?

作为新手管理者&#xff0c;需要学习的内容非常多。以下是一些重要的学习内容&#xff1a; 1. 领导力和管理技能&#xff1a;作为管理者&#xff0c;首先要学习如何有效地领导和管理团队。这包括学习如何激励员工、制定目标和计划、分配任务、解决冲突等。管理者需要具备良好的…

解决Ubuntu使用supervisor管控的程序不能使用麦克风的问题

项目场景&#xff1a; Ubuntu服务器有时候可能更多的是用来跑服务&#xff0c;但是如果用来调取麦克风又担心自己的程序崩溃掉&#xff0c;你可能自然想到使用supervisor来管控自己的程序&#xff0c;但是似乎并不是那么好用。 问题描述 Ubuntu正常使用机器的能力是没有问题的…

【医疗设备方案】脉搏式血氧仪方案

脉搏式血氧仪的主要测量数据分别是血氧饱和度、脉率、血流灌注指数。其中血氧饱和度是指在全部血容量中被结合氧气容量占全部可结合的氧气容量的百分比&#xff0c;是临床医疗上重要的基础数据之一。 脉搏式血氧仪测量原理 典型的脉搏式血氧仪带有一颗光电二极管PD和两颗发光二…

亚马逊云科技re:Invent大会:RAG技术赋能企业AI应用的新纪元

在最新一届re:Invent大会中&#xff0c;亚马逊云科技的数据和人工智能副总裁Swami Sivasubramanian博士提出了一系列AI产品&#xff0c;其中RAG技术成为了企业构建生成式AI应用的重要选择。这种技术的实质是将向量数据库与大语言模型相结合&#xff0c;赋予大模型记忆的能力&am…

LangChain的函数,工具和代理(五):Tools Routing

关于langchain的函数、工具、代理系列的博客我之前已经写了四篇&#xff0c;还没有看过的朋友请先看一下&#xff0c;这样便于对后续博客内容的理解&#xff1a; LangChain的函数&#xff0c;工具和代理(一)&#xff1a;OpenAI的函数调用 LangChain的函数&#xff0c;工具和代…

2023最全的Web自动化测试介绍(建议收藏)

做测试的同学们都了解&#xff0c;做Web自动化&#xff0c;我们主要用Selenium或者是QTP。 有的人可能就会说&#xff0c;我没这个Java基础&#xff0c;没有Selenium基础&#xff0c;能行吗&#xff1f;测试虽然属于计算机行业&#xff0c;但其实并不需要太深入的编程知识&…

C++模板初阶

文章目录 泛型编程函数模板格式模板调用的是同一个函数吗&#xff1f;模板的实现原理T不明确模板实例化的函数和普通函数 类模板类模板写法类模板用法 注意事项 泛型编程 假如我们要写一个两数交换的函数&#xff0c;按我们之前学的知识&#xff0c;我们会这样。 void Swap(i…

TypeScript 在前端开发中的应用范围有哪些?

引言 TypeScript是一种由Microsoft开发的开源编程语言&#xff0c;它是JavaScript的超集&#xff0c;添加了静态类型和其他一些面向对象的特性。在前端开发中&#xff0c;TypeScript的应用范围非常广泛&#xff0c;它不仅提供了更好的开发工具支持&#xff0c;还在代码质量、可…

微信小程序基础bug

1.苹果11手机小程序请求数据不显示 设置-》隐私-》分析与改进-》开启 ”与开发者共享“ 2.<navigator>组件回退delta不成功 tabBar 页面是不能实现后退的效果的. 因为, 当我们跳转到 tabBar 页面&#xff0c;会关闭其他所有非tabBar 页面,所以当处于 tabBar 页面时, 无…

SAP ABAP 通过右键菜单完成Tree Control 节点的增删改功能

通过右键菜单完成Tree Control 节点的增删改功能 Tree 节点的增删改是很重要的功能&#xff0c;包括&#xff1a;增加本级节点&#xff0c;增加子节点&#xff0c;修改节点&#xff0c;删 除节点。完成后效果如下&#xff1a; 选择根节点&#xff0c;单击右键&#xff0c;弹…

peertalk Usbmux 资料收集与整理

Usbmux - The iPhone Wiki Usbmux During normal operations, iTunes communicates with the iPhone using something called “usbmux” – this is a system for multiplexing several “connections” over one USB pipe. Conceptually, it provides a TCP-like system –…

高压功率放大器产品参数及优势有哪些

高压功率放大器是一种关键性能器件&#xff0c;常用于不同领域的应用&#xff0c;包括声音放大、通信系统、电力传输等。以下是关于高压功率放大器产品参数和优势的详细介绍。 一、高压功率放大器的产品参数 输入/输出电压范围&#xff1a;高压功率放大器通常能够承受较高的输入…

金融科技Q3增长密码:结构调优,质量增厚

来源 | 镭射财经&#xff08;leishecaijing&#xff09; 金融科技上市公司三季度交出规模突破、业绩稳增的答卷&#xff0c;为四季度审慎经营、风控优化创造了空间。 从三季度业绩数据看&#xff0c;金融科技行业延续了前两个季度的增长势头&#xff0c;主要金融科技上市公司…

每日汇评:由于美国ADP就业数据疲弱,黄金的反弹可能会延续

在美元全面回落的背景下&#xff0c;金价在2020美元附近跃跃欲试。&#xff1b; 黄金价格的上涨似乎受到美债正收益率的限制&#xff1b; 黄金价格等待美国ADP就业数据获得新的提振&#xff0c;因为技术支撑仍然存在&#xff1b; 周三早盘&#xff0c;金价在2020美元附近小幅反…

处理数据时注意事项

数据安全&#xff1a; 历史数据兼容 越权访问 数据量级 操作记录

完美解决:wget命令下载时遇到“错误 308:Permanent Redirect。”

目录 1 问题 2 解决方法 1 问题 使用wget命令下载时候遇到&#xff1a; --2023-12-02 20:36:08-- http://mirrors.jenkins.io/war-stable/latest/jenkins.war 正在解析主机 mirrors.jenkins.io (mirrors.jenkins.io)... 20.7.178.24, 2603:1030:408:5::15a 正在连接 mirror…

电子版简历模板精选5篇

电子版简历模板模板下载&#xff08;可在线编辑制作&#xff09;&#xff1a;做好简历&#xff0c;来幻主简历。 电子版简历1&#xff1a; 求职意向 求职类型&#xff1a;全职 意向岗位&#xff1a;ERP咨询顾问 意向城市&#xff1a;北京市 薪资要求&#xff1a;…