当前位置: 首页 > news >正文

从零开始学习 JavaScript 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一个七个部分所有知识点的一个总结!!!*(以上模块我会陆续出详细教程!!!!) 

相关文章:

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

大家好关于JS APl 知识点已经全部总结了&#xff0c;第七部部分全部都是案例部分呢&#xff01;&#xff01;&#xff08;素材的可以去百度网盘去下载&#xff01;&#xff01;&#xff01;&#xff09; 目录 前言 一、个人实战文档 放大镜效果 思路分析&#xff1a; 关于其它…...

使用Pytoch实现Opencv warpAffine方法

随着深度学习的不断发展&#xff0c;GPU/NPU的算力也越来越强&#xff0c;对于一些传统CV计算也希望能够直接在GPU/NPU上进行&#xff0c;例如Opencv的warpAffine方法。Opencv的warpAffine的功能主要是做仿射变换&#xff0c;如果不了解仿射变换的请自行了解。由于Pytorch的图像…...

Hello World

世界上最著名的程序 from fastapi import FastAPIapp FastAPI()app.get("/") async def root():return {"message": "Hello World"}app.get("/hello/{name}") async def say_hello(name: str):return {"message": f"…...

【Python】Python读Excel文件生成xml文件

目录 ​前言 正文 1.Python基础学习 2.Python读取Excel表格 2.1安装xlrd模块 2.2使用介绍 2.2.1常用单元格中的数据类型 2.2.2 导入模块 2.2.3打开Excel文件读取数据 2.2.4常用函数 2.2.5代码测试 2.2.6 Python操作Excel官方网址 3.Python创建xml文件 3.1 xml语法…...

c++--类型行为控制

1.c的类 1.1.c的类关键点 c类型的关键点在于类存在继承。在此基础上&#xff0c;类存在构造&#xff0c;赋值&#xff0c;析构三类通用的关键行为。 类型提供了构造函数&#xff0c;赋值运算符&#xff0c;析构函数来让我们控制三类通用行为的具体表现。 为了清楚的说明类的构…...

笔记64:Bahdanau 注意力

本地笔记地址&#xff1a;D:\work_file\&#xff08;4&#xff09;DeepLearning_Learning\03_个人笔记\3.循环神经网络\第10章&#xff1a;动手学深度学习~注意力机制 a a a a a a a a a a a...

面试官问:如何手动触发垃圾回收?幸好昨天复习到了

在Java中&#xff0c;手动触发垃圾回收可以使用 System.gc() 方法。但需要注意&#xff0c;调用 System.gc() 并不能确保立即执行垃圾回收&#xff0c;因为具体的垃圾回收行为是由Java虚拟机决定的&#xff0c;而不受程序员直接控制。 public class GarbageCollectionExample …...

操作系统的运行机制+中断和异常

一、CPU状态 在CPU设计和生产的时候就划分了特权指令和非特叔指令&#xff0c;因此CPU执行一条指令前就能断出其类型 CPU有两种状态&#xff0c;“内核态”和“用户态” 处于内核态时&#xff0c;说明此时正在运行的是内核程序&#xff0c;此时可以执行特权指令。 处于用户态…...

Python实战:批量加密Excel文件指南

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;我是彭涛&#xff0c;今天为大家分享 Python实战&#xff1a;批量加密Excel文件指南&#xff0c;全文3800字&#xff0c;阅读大约10分钟。 在日常工作中&#xff0c;保护敏感数据是至关重要的。本文将引导你通过…...

二叉树链式结构的实现和二叉树的遍历以及判断完全二叉树

二叉树的实现 定义结构体 我们首先定义一个结构来存放二叉树的节点 结构体里分别存放左子节点和右子节点以及节点存放的数据 typedef int BTDataType; typedef struct BinaryTreeNode {BTDataType data;struct BinaryTreeNode* left;struct BinaryTreeNode* right; }BTNode;…...

vue中的动画组件使用及如何在vue中使用animate.css

“< Transition >” 是一个内置组件&#xff0c;这意味着它在任意别的组件中都可以被使用&#xff0c;无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发&#xff1a; 由 v-if 所触发的切换由 v-show 所触…...

qt 5.15.2 网络文件下载功能

qt 5.15.2 网络文件下载功能 #include <QCoreApplication>#include <iostream> #include <QFile> #include <QTextStream> // #include <QtCore> #include <QtNetwork> #include <QNetworkAccessManager> #include <QNetworkRep…...

Wifi adb 操作步骤

1.连接usb 到主机 手机开起热点&#xff0c;电脑和车机连接手机&#xff0c;或者电脑开热点&#xff0c;车机连接电脑&#xff0c;车机和电脑连接同一个网络 因为需要先使用usb&#xff0c;后面切换到wifi usb 2.查看车机ip地址&#xff0c;和电脑ip地址 电脑win键r 输入cmd…...

湿货 - 231206 - 关于如何构造输入输出数据并读写至文件中

TAG - 造数据、读写文件 造数据、读写文件 造数据、读写文件//*.in // #include<bits/stdc.h> using namespace std;/* *********** *********** 全局 ********** *********** */ string Pre_File_Name; ofstream IN_cout; int idx;void Modify_ABS_Path( string& …...

EasyMicrobiome-易扩增子、易宏基因组等分析流程依赖常用软件、脚本文件和数据库注释文件

啥也不说了&#xff0c;这个好用&#xff0c;给大家推荐&#xff1a;YongxinLiu/EasyMicrobiome (github.com) 大家先看看引用文献吧&#xff0c;很有用&#xff1a;https://doi.org/10.1002/imt2.83 还有这个&#xff0c;后面马上介绍&#xff1a;YongxinLiu/EasyAmplicon: E…...

【Python百宝箱】漫游Python数据可视化宇宙:pyspark、dash、streamlit、matplotlib、seaborn全景式导览

Python数据可视化大比拼&#xff1a;从大数据处理到交互式Web应用 前言 在当今数字时代&#xff0c;数据可视化是解释和传达信息的不可或缺的工具之一。本文将深入探讨Python中流行的数据可视化库&#xff0c;从大数据处理到交互式Web应用&#xff0c;为读者提供全面的了解和…...

企业数字档案馆室建设指南

数字化时代&#xff0c;企业数字化转型已经成为当下各行业发展的必然趋势。企业数字化转型不仅仅是IT系统的升级&#xff0c;也包括企业内部各种文件、档案、合同等信息的数字化管理。因此&#xff0c;建设数字档案馆室也变得尤为重要。本篇文章将为您介绍企业数字档案馆室建设…...

JavaScript中处理时间差

ES6版本 function countdown(endTime, includeSeconds true) {// 获取当前时间let now new Date();// 将传入的结束时间字符串转换为日期对象let endDateTime new Date(endTime);// 检查传入的时间字符串是否只包含日期&#xff08;不包含时分秒&#xff09;if (endTime.tr…...

Multidimensional Scaling(MDS多维缩放)算法及其应用

在这篇博客中&#xff0c;我将与大家分享在流形分析领域的一个非常重要的方法&#xff0c;即多维缩放MDS。整体来说&#xff0c;该方法提供了一种将内蕴距离映射到显性欧氏空间的计算&#xff0c;为非刚性形状分析提供了一种解决方案。当初就是因为读了Bronstein的相关工作【1】…...

单片机_RTOS_架构

一. RTOS的概念 // 经典单片机程序 void main() {while (1){喂一口饭();回一个信息();} } ------------------------------------------------------ // RTOS程序 喂饭() {while (1){喂一口饭();} }回信息() {while (1){回一个信息();} }void main() {create_task(喂饭);cr…...

Golang rsa 验证

一下代码用于rsa 签名的验签&#xff0c; 签名可以用其他语言产生。也可以用golang生成。 package mainimport ("crypto""crypto/rsa""crypto/sha256""crypto/x509""encoding/pem""errors""fmt" )fun…...

网络安全威胁——跨站脚本攻击

跨站脚本攻击 1. 定义2. 跨站脚本攻击如何工作3. 跨站脚本攻击类型4. 如何防止跨站脚本攻击 1. 定义 跨站脚本攻击&#xff08;Cross-site Scripting&#xff0c;通常称为XSS&#xff09;&#xff0c;是一种典型的Web程序漏洞利用攻击&#xff0c;在线论坛、博客、留言板等共享…...

Java利用UDP实现简单的双人聊天

一、创建新项目 首先创建一个新的项目&#xff0c;并命名。 二、实现代码 import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.net.*; import java.io.IOException; import java.lang.String; public class liaotian extends JFrame{ pri…...

HBase整合Phoenix

文章目录 一、简介1、Phoenix定义2、Phoenix架构 二、安装Phoenix1、安装 三、Phoenix操作1、Phoenix 数据映射2、Phoenix Shell操作3、Phoenix JDBC操作3.1 胖客户端3.2 瘦客户端 四、Phoenix二级索引1、为什么需要二级索引2、全局索引&#xff08;global index&#xff09;3、…...

C# 委托/事件/lambda

概念 委托 定义委托编译器会自动生成一个类派生自System.MulticastDelegate 这个类包含4个方法&#xff1a;一个构造器、Invoke、BeginInvoke、EndInvoke。 调用委托的时候实际上执行的是 Invoke方法。 MulticastDelegate类有三个重要字段&#xff1a; _target&#xff…...

13款趣味性不错(炫酷)的前端动画特效及源码(预览获取)分享(附源码)

文字激光打印特效 基于canvas实现的动画特效&#xff0c;你既可以设置初始的打印文字也可以在下方输入文字可实现激光字体打印&#xff0c;精简易用。 预览获取 核心代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8&q…...

C# 友元程序集

1.友元程序集 使用友元程序集可以将internal成员提供给其他的友元程序集访问。 程序集FriendTest1.dll [assembly:InternalsVisibleTo("FriendTest2")] namespace FriendTest1 {internal class Friend{string name;public string Name > name;public Friend(str…...

CRM系统的数据分析和报表功能对企业重要吗?

竞争日益激烈&#xff0c;企业需要更加高效地管理客户关系&#xff0c;以获取更多的商机。为此&#xff0c;许多企业选择使用CRM系统。在CRM中&#xff0c;数据分析功能扮演着重要的角色。下面就来详细说说&#xff0c;CRM系统数据分析与报表功能对企业来说重要吗&#xff1f; …...

【单体架构事务失效解决方式之___代理对象加锁】

单体架构__用户限买 一个id一单的多线程事务失效问题解决 背景介绍&#xff1a;有一种情况&#xff0c;我们在使用Synchronized的时候出现失效情况。 经过排查&#xff0c;是因为使用了this.当前对象&#xff0c;他现在使用的是目标对象加锁失效&#xff0c;使用代理对象加锁就…...

面试被问到 HTTP和HTTPS的区别有哪些?你该如何回答~

HTTP和HTTPS的区别有哪些&#xff0c;主要从以下几个方面来说&#xff1a; 1.安全性 HTTP和HTTPS是两种不同的协议&#xff0c;它们之间最主要的区别在于安全性。HTTP协议以明文方式发送内容&#xff0c;不提供任何方式的数据加密&#xff0c;容易被攻击者截取信息。 HTTPS则在…...