元素跟随鼠标移动事件,小动画

最新推荐文章于 2024-02-12 17:11:57 发布

Big power

最新推荐文章于 2024-02-12 17:11:57 发布

阅读量1.8k

点赞数 3

分类专栏：大前端文章标签： atan2() clientX clientY onmousemove cos()

本文链接：https://blog.csdn.net/weixin_40289389/article/details/81190546

版权

大前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前段时间做一个简单的动画,想让人物的眼睛,跟随鼠标的移动而转动,但是在网上找到的案例结果都实现了,但是过程上有一点小错误,今天我就自己理解完了以后自己写了一个;

让元素跟随鼠标的移动主要需要用到的原理就是相似三角形的原理,并指定一个但三角形的斜边作为元素移动的半径;

原理如图:

原理图

主要用到的方法:

onmousemove: 鼠标移入事件

e.clientX : 鼠标在当前窗口的X轴坐标;

e.clientY : 鼠标在当前窗口的Y 轴坐标;

atan2(y,x) : 是表示X-Y平面上所对应的(x,y)坐标的角度，它的值域范围是(-Pi,Pi);

sin() : 一个以弧度表示的角;可通过半径值和角度值获取到点的Y轴上的坐标;

cos() : 一个以弧度表示的角;可通过半径值和角度值获取到点的X轴上的坐标;

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旺仔</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        div{
            margin:100px auto;
            position: relative;
            width: 245px;
            height: 358px;
        }
        img:first-child{
            display: block;
            margin: 0 auto;
        }
        #left{
            position: absolute;
            top: 133px;
            left:96px;
        }
        #right{
            position: absolute;
            top: 133px;
            left:154px;
        }
    
    </style>
</head>
<body>
    <div id = "div">
        <img id="box" src="http://www.dlsjf.top/images/csdn/2.jpg" alt="">
        <img id="left" src="http://www.dlsjf.top/images/csdn/1.png" alt="">
        <img id="right" src="1.png" alt="">
    </div>
</body>
</html>
<script>
    var div = document.getElementById('div')
    var box = document.getElementById('box');
    var leftEye = document.getElementById('left');
    var rightEye = document.getElementById('right');

    //获取鼠标在屏幕的位置；
    document.onmousemove = function(e){
        e = e || window.event;
        var x = e.clientX;
        var y = e.clientY;
        //定义眼睛可移动的半径；
        var r = 15;
        //找到两只眼睛的移动的中心点；
        var X1 = 96+div.offsetLeft;
        var Y1 = 150+div.offsetTop;
        var X2 = 154+div.offsetLeft;
        var Y2 = 150+div.offsetTop;
        //将鼠标所在的位置，转换为角度；
        var a1 = Math.atan2(y-Y1,x-X1);
        var a2 = Math.atan2(y-Y2,x-X2);
        //将角度转换为坐标赋给眼睛；
        leftEye.style.left = r*Math.cos(a1)+96-8+"px";
        leftEye.style.top = r*Math.sin(a1)+145-10+"px";
        rightEye.style.left = r*Math.cos(a2)+154-8+"px";
        rightEye.style.top = r*Math.sin(a2)+145-10+"px";
    }
    


</script>

Big power

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
元素跟随鼠标移动事件,小动画

前段时间做一个简单的动画,想让人物的眼睛,跟随鼠标的移动而转动,但是在网上找到的案例结果都实现了,但是过程上有一点小错误,今天我就自己理解完了以后自己写了一个;让元素跟随鼠标的移动主要需要用到的原理就是相似三角形的原理,并指定一个但三角形的斜边作为元素移动的半径;原理如图:主要用到的方法: onmousemove: 鼠标移入事件e.clientX : 鼠标在当前窗口的...
复制链接

扫一扫