原生js 实现mac上的鼠标滑过图标的效果方法

最新推荐文章于 2023-11-03 23:30:27 发布

风清云淡_A

最新推荐文章于 2023-11-03 23:30:27 发布

阅读量355

点赞数

分类专栏：再学javascript算法之美 js原生知识案例文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_27702739/article/details/128050512

版权

js原生知识案例同时被 2 个专栏收录

92 篇文章 2 订阅

订阅专栏

再学javascript算法之美

25 篇文章 0 订阅

订阅专栏

原生js实现的鼠标滑过图标效果，实现起来比较简单，重点就是计算放大缩小的比例，看效果

最终效果

请添加图片描述

业务逻辑分析

在这里插入图片描述

js

window.onload = function () {
        let aInput = document.getElementsByTagName('input')
        let oDiv = document.getElementById('div1')
        let aImg = oDiv.getElementsByTagName('img')
        document.onmousemove = function (e) {
          let ev = e || window.event
          for (let index = 0; index < aImg.length; index++) {
            const element = aImg[index]

            let x = element.offsetLeft + element.offsetWidth / 2
            let y =
              element.offsetTop + element.offsetHeight / 2 + oDiv.offsetTop

            let a = ev.clientX - x
            let b = ev.clientY - y
            // debugger
            let c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2))
            let scale = c / 300
            scale = 1 - scale <= 0.5 ? 0.5 : 1 - scale
            aInput[index].value = 1 - scale
            element.style.width = scale * 128 + 'px'
          }
        }
      }

html

 <div id="div1">
      <img src="./images/1.png" alt="" srcset="" />
      <img src="./images/2.png" alt="" srcset="" />
      <img src="./images/3.png" alt="" srcset="" />
      <img src="./images/4.png" alt="" srcset="" />
      <img src="./images/5.png" alt="" srcset="" />
    </div>

css

#div1 {
        width: 100%;
        position: absolute;
        bottom: 0;
        text-align: center;
      }
      #div1 {
      }
      img {
        width: 64px;
      }
      ```