实现鼠标追随效果

最新推荐文章于 2025-04-19 18:12:53 发布

原创最新推荐文章于 2025-04-19 18:12:53 发布 · 1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css3 #html5 #javascript

该博客介绍了如何利用HTML5、CSS3和JavaScript实现一个有趣的交互效果：当鼠标移动时，页面上的元素不仅跟随鼠标移动，而且根据鼠标移动的角度在Z轴上进行旋转，并在Y轴上进行翻转。文章详细讲解了HTML布局、JavaScript变量声明、鼠标移动事件监听、坐标计算、角度计算以及元素翻转的实现步骤。

呈现效果：

1.页面中的gif动图跟随鼠标移动

2.元素随鼠标移动角度进行z轴旋转以及在方向上进行Y轴上的翻转

HTML代码部分

<head>
  <style>
        .img {
            width: 50px;
            height: 50px;
            background-image: url("goat.gif");
            background-size: cover;
            position: absolute;
        }
    </style>
</head>
<body>
  <div class="img"></div>
</body>

js部分

首先声明变量的部分

    var img = document.querySelector('.img')
    // 定义小图片的旋转角度
    var deg = 0
    // 定义小图片位于网页左侧位置,用来定义图片的距离
    var imgx = 0
    // 定义小图片位于网页顶部位置
    var imgy = 0
    // 定义小图片X轴的位置，图片移动的数值
    var imgl = 0
    // 小图片y轴的位置，图片移动的数值
    var imgt = 0;
    // 定义小图片翻转的角度，y轴上翻转0/-180
    var y = 0;
    //  定义一个计数器
    var index = 0;

1.设置鼠标移动的函数，添加鼠标移动监听事件，

2.获得鼠标坐标的X轴Y轴位置，

3.使它减去移动元素起始的XY轴坐标和元素自身宽高的一半，即可得出元素要移动的距离

4.计算角度

5.判断是否需要元素翻转

window.addEventListener('mousemove', function (xyz) {
        // 获取网页左侧距离的图片的位置 
        // clientWidth表示元素内部的宽度
        imgx = xyz.x - img.offsetLeft - img.clientWidth / 2;
        // 获取网页的顶部距离的图片的位置
        imgy = xyz.y - img.offsetTop - img.clientHeight / 2;
        // 套入公式，定义图片的旋转角度
        deg = 360 * Math.atan(imgy / imgx) / (2 * Math.PI)
        // 每当鼠标移动的时候，重置index值
        index = 0;
        //   定义当前鼠标的位置
        var x = event.clientX
        //  当鼠标在图片右边时（X>offsetleft），图片需要翻转过来，否则不用
        if (img.offsetLeft < x) {
            y = -180
        } else {
            y = 0
        }
    })

设置计数器，把元素要位移的距离分成50份，同时进行翻转

setInterval(() => {
        // 设置图片的旋转个翻转
        // rotateZ(90deg)rotateY(-180deg)
        img.style.transform = "rotateZ(" + deg + "deg) rotateY(" + y + "deg)"

        index++
        //  在这里设置小图片的位置和速度，并判断小图片到达鼠标位置时停下移动
        // imgx是每次鼠标的位置产生的距离差值，为了让小羊能精准的停下来，把这个差值分成50分，+=50次
        if (index < 50) {
            imgl += imgx / 50
            imgt += imgy / 50
        }
        img.style.left = imgl + "px"
        img.style.top = imgt + "px"
    }, 10)