JavaScript Web API入门day7

news2024/11/5 12:24:07

目录

1.图片切换模块

2.鼠标经过以及离开中等盒子,大盒子的处理

3.黑色遮罩层的位置以及放大功能

4.放大镜的完整代码


1.图片切换模块

效果图:

思路分析:

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

  1. 获取对应的元素

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

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

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

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

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

代码实现:

<script>
        //1.获取对象
    const small = document.querySelector('.small')
    const middle = document.querySelector('.middle')
  
    //2.鼠标经过事件(因为用到事件委托,因此需要用到冒泡,用mouseover)
    small.addEventListener('mouseover', function (e) {
      // console.log(11)
      // 图片生效  
      if (e.target.tagName === 'IMG') {
        //排他思想   查找small下的active,并且移除
        this.querySelector('.active').classList.remove('active')
        //图片对象的父亲 也就是li ,添加active
        e.target.parentNode.classList.add('active')

        // 可以获取到图片地址
        // console.log(e.target.src)
        // 把图片地址赋值给中盒子的图片
        middle.querySelector('img').src = e.target.src
      }

    })
</script>

2.鼠标经过以及离开中等盒子,大盒子的处理

效果图:

思路分析:

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

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

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

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

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

代码实现:

<script>
    //1.获取对象
    const small = document.querySelector('.small')
    const middle = document.querySelector('.middle')
    const large = document.querySelector('.large')

    //2.鼠标经过事件(因为用到事件委托,因此需要用到冒泡,用mouseover)
    small.addEventListener('mouseover', function (e) {
      // console.log(11)
      // 图片生效  
      if (e.target.tagName === 'IMG') {
        //排他思想   查找small下的active,并且移除
        this.querySelector('.active').classList.remove('active')
        //图片对象的父亲 也就是li ,添加active
        e.target.parentNode.classList.add('active')

        // 可以获取到图片地址
        // console.log(e.target.src)
        // 把图片地址赋值给中盒子的图片
        middle.querySelector('img').src = e.target.src

        // 把图片地址同时赋值给大盒子
        large.style.backgroundImage = `url(${e.target.src})`
      }

    })

    //3.中盒子控制,显示和隐藏大盒子
    middle.addEventListener('mouseenter', show)
    middle.addEventListener('mouseleave', hide)

    let timeout = 0
    //定义显示和隐藏函数
    function show() {
      //重置延时器(用户移动速度过快会出现bug)
      clearTimeout(timeout)
      large.style.display = 'block'
    }

    function hide() {
      //延迟器可以让用户体验更好
      timeout = setTimeout(function () {
        large.style.display = 'none'
      }, 200)
    }


    //4.在大盒子的位置的显示和隐藏
    large.addEventListener('mouseenter', show)
    large.addEventListener('mouseleave', hide)


    //5.中盒子的黑色遮罩
    const layer = document.querySelector('.layer')
    //显示
    middle.addEventListener('mouseenter', function () {
      layer.style.display = 'block'
    })
    //隐藏
    middle.addEventListener('mouseleave', function () {
      layer.style.display = 'none'
    })

3.黑色遮罩层的位置以及放大功能

实现效果:

思路分析:

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

  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 之间移动的

      • 垂直同理

代码实现:

<script>
    //5.中盒子的黑色遮罩
    const layer = document.querySelector('.layer')
    //显示
    middle.addEventListener('mouseenter', function () {
      layer.style.display = 'block'
    })
    //隐藏
    middle.addEventListener('mouseleave', function () {
      layer.style.display = 'none'
    })


    //6.黑色遮罩在中等盒子的移动处理
    middle.addEventListener('mousemove', function (e) {
      // console.log(11)
      // 鼠标距离左侧的位置
      // console.log(e.pageX)

      // 这里用getBoundingClientRect(),不用offset的原因是因为offset会受到定位的影响
      // console.log(this.getBoundingClientRect())

      // 得到黑色盒子相对于中等盒子的位置
      let x = e.pageX - this.getBoundingClientRect().left
      // 注意这里要减去被卷入的长度,不然遮罩会偏位,原因:滚动条滚动,this.getBoundingClientRect().top距离顶部变短
      let y = e.pageY - this.getBoundingClientRect().top - document.documentElement.scrollTop

      // 限定遮罩盒子在中等盒子内
      if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
        //鼠标动了,黑色盒子不一定要移动
        let mx = 0, my = 0
        // 让遮罩限定在中等盒子内
        if (x < 100) mx = 0
        // 这里减100是因为100以下的不变坐标
        if (x >= 100 && x <= 300) mx = x - 100
        if (x > 300) mx = 200

        if (y < 100) my = 0
        if (y >= 100 && y <= 300) my = y - 100
        if (y > 300) my = 200


        layer.style.left = mx + 'px'
        layer.style.top = my + 'px'

        // 放大镜效果(相反方向)
        large.style.backgroundPositionX = -2 * mx + 'px'
        large.style.backgroundPositionY = -2 * my + 'px'
      }

    })
</script>

4.放大镜的完整代码

代码:

  <script>
    //1.获取对象
    const small = document.querySelector('.small')
    const middle = document.querySelector('.middle')
    const large = document.querySelector('.large')

    //2.鼠标经过事件(因为用到事件委托,因此需要用到冒泡,用mouseover)
    small.addEventListener('mouseover', function (e) {
      // console.log(11)
      // 图片生效  
      if (e.target.tagName === 'IMG') {
        //排他思想   查找small下的active,并且移除
        this.querySelector('.active').classList.remove('active')
        //图片对象的父亲 也就是li ,添加active
        e.target.parentNode.classList.add('active')

        // 可以获取到图片地址
        // console.log(e.target.src)
        // 把图片地址赋值给中盒子的图片
        middle.querySelector('img').src = e.target.src

        // 把图片地址同时赋值给大盒子
        large.style.backgroundImage = `url(${e.target.src})`
      }

    })

    //3.中盒子控制,显示和隐藏大盒子
    middle.addEventListener('mouseenter', show)
    middle.addEventListener('mouseleave', hide)

    let timeout = 0
    //定义显示和隐藏函数
    function show() {
      //重置延时器(用户移动速度过快会出现bug)
      clearTimeout(timeout)
      large.style.display = 'block'
    }

    function hide() {
      //延迟器可以让用户体验更好
      timeout = setTimeout(function () {
        large.style.display = 'none'
      }, 200)
    }


    //4.在大盒子的位置的显示和隐藏
    large.addEventListener('mouseenter', show)
    large.addEventListener('mouseleave', hide)


    //5.中盒子的黑色遮罩
    const layer = document.querySelector('.layer')
    //显示
    middle.addEventListener('mouseenter', function () {
      layer.style.display = 'block'
    })
    //隐藏
    middle.addEventListener('mouseleave', function () {
      layer.style.display = 'none'
    })


    //6.黑色遮罩在中等盒子的移动处理
    middle.addEventListener('mousemove', function (e) {
      // console.log(11)
      // 鼠标距离左侧的位置
      // console.log(e.pageX)

      // 这里用getBoundingClientRect(),不用offset的原因是因为offset会受到定位的影响
      // console.log(this.getBoundingClientRect())

      // 得到黑色盒子相对于中等盒子的位置
      let x = e.pageX - this.getBoundingClientRect().left
      // 注意这里要减去被卷入的长度,不然遮罩会偏位,原因:滚动条滚动,this.getBoundingClientRect().top距离顶部变短
      let y = e.pageY - this.getBoundingClientRect().top - document.documentElement.scrollTop

      // 限定遮罩盒子在中等盒子内
      if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
        //鼠标动了,黑色盒子不一定要移动
        let mx = 0, my = 0
        // 让遮罩限定在中等盒子内
        if (x < 100) mx = 0
        if (x >= 100 && x <= 300) mx = x - 100
        if (x > 300) mx = 200

        if (y < 100) my = 0
        if (y >= 100 && y <= 300) my = y - 100
        if (y > 300) my = 200


        layer.style.left = mx + 'px'
        layer.style.top = my + 'px'

        // 放大镜效果(相反方向)
        large.style.backgroundPositionX = -2 * mx + 'px'
        large.style.backgroundPositionY = -2 * my + 'px'
      }

    })

  </script>

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

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

相关文章

2024 年高教社杯全国大学生数学建模竞赛B题第一问详细解题思路(终版)

示例代码&#xff1a; from scipy.stats import norm# 定义参数 p0 0.10 # 标称次品率 alpha 0.05 # 95% 信度下的显著性水平 beta 0.10 # 90% 信度下的显著性水平 E 0.01 # 允许的误差范围# 计算95%信度下的样本量 Z_alpha_2 norm.ppf(1 - alpha / 2) n_95 ((Z_alp…

ICM20948 DMP代码详解(7)

接前一篇文章&#xff1a;ICM20948 DMP代码详解&#xff08;6&#xff09; 上一回讲解了EMP-App中的入口函数main()中重点关注的第2段代码的前一个函数inv_icm20948_reset_states&#xff0c;本回讲解后一个函数inv_icm20948_register_aux_compass。 为了便于理解和回顾&#…

mipi协议:多通道分配和合并

Multi-Lane Distribution and Merging: CSI-2 是一个通道可扩展的规范。对于需要比单个数据通道提供更多带宽的应用&#xff0c;或者那些希望避免高时钟频率的应用&#xff0c;可以通过增加数据通道的数量来扩展数据路径&#xff0c;从而近似线性地提高总线的峰值带宽。为了确保…

CocosCreator中使用protobuf

(前提) 工欲善其事,必先利其器. 要想在CocosCreator中使用protobuf,我们首先要安装NodeJs.安装教程可参考Node.js安装及环境配置详细教程_nodejs安装及环境配置-CSDN博客,已经很详细了.NodeJs自带npm, 我们要用npm下载protobufjs.可能你会问npm是什么? npm是NodeJs自带的包管理…

spring中添加@Test注解测试

1、添加maven依赖 <!-- 添加test方便测试--><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.13.2</version><scope>test</scope></dependency><dependency><grou…

如何将卷积神经网络(CNN)应用于医学图像分析:从分类到分割和检测的实用指南

引言 在现代医疗领域,医学图像已经成为疾病诊断和治疗规划的重要工具。医学图像的类型繁多,包括但不限于X射线、CT(计算机断层扫描)、MRI(磁共振成像)和超声图像。这些图像提供了对身体内部结构的详细视图,有助于医生在进行准确诊断和制定个性化治疗方案时获取关键的信…

如何利用评论进行有效的 ASO

如何利用评论进行有效的ASO的问题的答案通常以“正面评论”一词开始。确实&#xff0c;这句话首先浮现在脑海中。但这个问题的答案包括负面评论、用户体验、提高知名度、评分、根据评论优化应用程序以及许多其他有趣的点。这里几乎没有无聊的统计数据&#xff0c;这些数字也不会…

Qt-常用控件(3)-多元素控件、容器类控件和布局管理器

1. 多元素控件 Qt 中提供的多元素控件有: QListWidgetQListViewQTableWidgetQTableViewQTreeWidgetQTreeView xxWidget 和 xxView 之间的区别&#xff0c;以 QTableWidget 和 QTableView 为例. QTableView 是基于 MVC 设计的控件.QTableView 自身不持有数据,使用 QTableView 的…

lamp的脚本部署

l是linux,a是apache,m是mysql&#xff0c;p是php。最基本的动态网页搭建。语法后面再补几篇&#xff0c;现在先写吧。 一、环境准备 1.1、rocklinux换源&#xff0c;关掉防火墙&#xff0c;selinux&#xff0c;时间同步 #cp rocky* /a # 阿里 sed -e s|^#mirrorlist|mirro…

windows10 卸载网络驱动以及重新安装

右键桌面此电脑的图标&#xff0c;点击管理&#xff0c;设备管理器—网络适配器&#xff0c;找到下图中的驱动&#xff08;不同的系统或者显卡会导致网卡驱动名称与下图不一样&#xff0c;多为Realtek开头&#xff09;&#xff0c;右键选择卸载设备&#xff0c;然后重启电脑&am…

LabVIEW软件,如何检测连接到的设备?

在LabVIEW软件中&#xff0c;检测连接到的设备通常是通过NI提供的硬件驱动和相关工具来完成的。以下是几种常见的检测设备的方法&#xff1a; 1. 使用NI MAX&#xff08;Measurement & Automation Explorer&#xff09; 打开NI MAX&#xff1a;LabVIEW设备管理通常通过NI …

【软件文档】软件系统需求管理规程(项目管理word原件)

软件资料清单列表部分文档清单&#xff1a;工作安排任务书&#xff0c;可行性分析报告&#xff0c;立项申请审批表&#xff0c;产品需求规格说明书&#xff0c;需求调研计划&#xff0c;用户需求调查单&#xff0c;用户需求说明书&#xff0c;概要设计说明书&#xff0c;技术解…

网络学习-eNSP配置路由器

#PC1网关&#xff1a;192.168.1.254 #PC3网关&#xff1a;192.168.3.254 #PC4网关&#xff1a;192.168.4.254# 注&#xff1a;路由器接口必须配置不同网段IP地址 <Huawei>system-view Enter system view, return user view with CtrlZ. #给路由器两个接口配置IP地址 [Hua…

【Kubernetes】K8s 的安全框架和用户认证

K8s 的安全框架和用户认证 1.Kubernetes 的安全框架1.1 认证&#xff1a;Authentication1.2 鉴权&#xff1a;Authorization1.3 准入控制&#xff1a;Admission Control 2.Kubernetes 的用户认证2.1 Kubernetes 的用户认证方式2.2 配置 Kubernetes 集群使用密码认证 Kubernetes…

基于springboot+vue+uniapp的“共享书角”图书借还管理系统小程序

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…

天翼云存储资源盘活系统 HBlock:企业级轻量存储的革新与实战

目录 前言关于HBlock系统HBlock的核心优势番外篇&#xff1a;HBlock应用场景结束语参考文献 前言 在数字化转型的浪潮中&#xff0c;数据存储作为支撑企业业务连续性和数据安全的基石&#xff0c;企业对于存储资源的需求日益增长&#xff0c;同时也面临着成本控制和资源优化的…

常见监督学习算法学习总结。

目录 一、K临近算法 二、决策树 三、多层感知器 四、伯努利贝叶斯算法 五、高斯贝叶斯 一、K临近算法 K 临近算法&#xff08;K-Nearest Neighbors&#xff0c;简称 KNN&#xff09;是一种监督学习算法&#xff0c;用于分类和回归任务。 它通过计算样本之间的距离来进行…

前端开发中遇到的小问题以及解决方案记录2

1、H5中适配屏幕的工具-postcss-px-to-viewport postcss-px-to-viewport。因为设计稿一般给的都是375px宽度的&#xff0c;所以假如一个字体是16px&#xff0c;那么在开发中不能直接写死为16px&#xff0c;因为各个厂商的手机屏幕大小是不同的&#xff0c;所以要根据屏幕大小去…

一款支持同一个屏幕界面同时播放多个视频的视频播放软件

GridPlayer 是一款基于 VLC 的免费开源跨平台多视频同步播放工具&#xff0c;支持在一块屏幕上同时播放多个视频。其主要功能包括&#xff1a; 多视频播放&#xff1a;用户可以在一个窗口中同时播放任意数量的视频&#xff0c;数量仅受硬件性能限制。支持多种格式和流媒体&…

半年高达552亿元,锁定云第一,中国电信天翼云紧追不舍

【科技明说 &#xff5c; 科技热点关注】 刚才我注意到中国电信公布2024年中期业绩&#xff0c;报告期内&#xff0c;中国电信实现营业收入为人民币2660亿元&#xff0c;同比增长2.8%&#xff0c;其中服务收入为人民币2462亿元&#xff0c;同比增长4.3%&#xff1b;净利润为人民…