JavaScript Web API入门day7

麒麟而非淇淋2024-09-08 6:03

目录

1.图片切换模块

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

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

4.放大镜的完整代码

1.图片切换模块

效果图：

思路分析：

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

  1. 获取对应的元素

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

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

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

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

    • 让大盒子的背景图片，也换成这个小图片的 src （稍后做）

代码实现：

javascript 复制代码 
<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. 给大盒子里面的背景图片一个默认的第一张图片

代码实现：

javascript 复制代码 
<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 之间移动的

      • 垂直同理

代码实现：

javascript 复制代码 
<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.放大镜的完整代码

代码：

javascript 复制代码 
  <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>
相关推荐
编程零零七2 小时前
Python数据分析工具(三)：pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
北岛寒沫3 小时前
JavaScript（JS）学习笔记 1（简单介绍 注释和输入输出语句 变量 数据类型 运算符 流程控制 数组）
javascript·笔记·学习
everyStudy3 小时前
JavaScript如何判断输入的是空格
开发语言·javascript·ecmascript
(⊙o⊙)~哦4 小时前
JavaScript substring() 方法
前端
无心使然云中漫步4 小时前
GIS OGC之WMTS地图服务，通过Capabilities XML描述文档，获取matrixIds，origin，计算resolutions
前端·javascript
Bug缔造者4 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
xnian_5 小时前
解决ruoyi-vue-pro-master框架引入报错，启动报错问题
前端·javascript·vue.js
罗政5 小时前
[附源码]超简洁个人博客网站搭建+SpringBoot+Vue前后端分离
vue.js·spring boot·后端
麒麟而非淇淋5 小时前
AJAX 入门 day1
前端·javascript·ajax
2401_858120536 小时前
深入理解MATLAB中的事件处理机制
前端·javascript·matlab
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习