用js实现元素跟着鼠标转动效果

这篇具有很好参考价值的文章主要介绍了用js实现元素跟着鼠标转动效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先上效果(完整代码在最后):

用js实现元素跟着鼠标转动效果

 当鼠标移入body时,元素跟着鼠标旋转,所有的元素都看向鼠标的位置。

实现过程(可跟着一步一步书写):

先来看看布局,html部分

 <div class="shell">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

在一个shell中,总共有36个item。

接下来来看样式 css部分

<style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: radial-gradient(circle at center, #724ab8, rgb(119, 112, 119));

            cursor: pointer;
        }

        .shell {
            display: grid;
            grid-template-columns: repeat(6, 50px);
            grid-template-rows: repeat(6, 50px);
            grid-gap: 2rem;
        }

        .item {
            width: 50px;
            height: 50px;
            background-color: rgb(40, 40, 40);
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            border-left: solid 10px #fff;
            position: relative;
        }

        .item::after,
        .item::before {
            content: "";
            width: 5px;
            height: 5px;
            position: absolute;
            border-radius: 50%;
            background-color: skyblue;
            left: 30px;
        }

        .item::after {
            top: 15px;
        }

        .item::before {
            bottom: 15px;
        }
    </style>

这里对shell盒子采用css3的网格布局,对它的子元素进行分成6行6列的形式,宽和高都为50px,

然后利用双伪元素来画它的小眼睛。

用js实现元素跟着鼠标转动效果然后每个小方块都化成这个样子。

js部分,实现跟随鼠标转动:

原理:通过鼠标位置给小方块设置对应的旋转rotate角度。

<script>
        var flag = true //节流阀
        document.addEventListener('mousemove', function (e) {
            if (flag) {
                flag = false  //关闭

                var item =Array.from(document.querySelectorAll('.item'))
                //获取鼠标位置
                var mouseX = e.clientX
                var mouseY = e.clientY;
                item.forEach(function (sqr, index) {
                    //获取元素位置
                    var sqrX = sqr.offsetLeft;
                    var sqrY = sqr.offsetTop;
                    //鼠标位置减去元素位置获取当前元素坐标
                    var diffX = mouseX - sqrX
                    var diffY = mouseY - sqrY
                    //Math.atan2(y,x) 返回x轴到(x,y)的角度 //pi值
                    var radians = Math.atan2(diffY, diffX)
  
                    var angle = radians * 180 / Math.PI //角度
                    sqr.style.transform = `rotate(${angle}deg)`
                });
                setTimeout(function () {
                    flag = true  //打开
                }, 30)
            }
        })
    </script>

 1.给整个页面绑定鼠标移入事件,传入事件对象(获取鼠标位置)。

2.先获取所有item存在一个类数组中,然后通过Array.from() 方法将类数组转换为数组,后续会调用forEach方法。

3.通过 e.clientX,e.clientY获取鼠标位置

4.遍历数组,(sqr)为当前元素, 然后获取元素的位置

4.用鼠标的位置减去元素的位置获取当前的元素坐标

5.然后通关Math.atan2(y,x) 函数获取x轴到(x,y)坐标的角度(相对π值);

6.将获取到的角度换算成角弧度值。

7.最后再给.当前sqr元素,设置rotate旋转就好了。

完整代码(总结):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跟随鼠标转动</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: radial-gradient(circle at center, #724ab8, rgb(119, 112, 119));

            cursor: pointer;
        }

        .shell {
            display: grid;
            grid-template-columns: repeat(6, 50px);
            grid-template-rows: repeat(6, 50px);
            grid-gap: 2rem;
        }

        .item {
            width: 50px;
            height: 50px;
            background-color: rgb(40, 40, 40);
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            border-left: solid 10px #fff;
            position: relative;
        }

        .item::after,
        .item::before {
            content: "";
            width: 5px;
            height: 5px;
            position: absolute;
            border-radius: 50%;
            background-color: skyblue;
            left: 30px;
        }

        .item::after {
            top: 15px;
        }

        .item::before {
            bottom: 15px;
        }
    </style>
</head>

<body>
    <div class="shell">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

    <script>
        var flag = true //节流阀
        document.addEventListener('mousemove', function (e) {
            if (flag) {
                flag = false   //关闭
                console.log(1);
                var item =Array.from(document.querySelectorAll('.item'))
                console.log(item); 
                //获取鼠标位置
                var mouseX = e.clientX
                var mouseY = e.clientY;
                item.forEach(function (sqr, index) {
                    //获取元素位置
                    var sqrX = sqr.offsetLeft;
                    var sqrY = sqr.offsetTop;
                    //鼠标位置减去元素位置获取当前元素坐标
                    var diffX = mouseX - sqrX
                    var diffY = mouseY - sqrY
                    //Math.atan2(y,x) 返回x轴到(x,y)的角度 //pi值
                    var radians = Math.atan2(diffY, diffX)
                    console.log(radians);
                    var angle = radians * 180 / Math.PI //角度
                    sqr.style.transform = `rotate(${angle}deg)`
                });
                setTimeout(function () {
                    flag = true //打开
                }, 30)
            }
        })
    </script>
</body>

</html>

感谢浏览!!!文章来源地址https://www.toymoban.com/news/detail-485418.html

到了这里,关于用js实现元素跟着鼠标转动效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包