原生js实现鼠标在页面上滑动时，物体随着转动

最新推荐文章于 2024-07-22 17:30:43 发布

冰雪为融

最新推荐文章于 2024-07-22 17:30:43 发布

阅读量3.9k

点赞数

分类专栏： js学习笔记整理

本文链接：https://blog.csdn.net/lhjuejiang/article/details/79767634

版权

js学习笔记整理专栏收录该内容

56 篇文章 7 订阅

订阅专栏

嗯，就是鼠标在窗口移动的时候，方块随着鼠标所在的位置转动方向

这里主要运用到了Math.asin()方法，用这种方法求出的是弧度数

不难，所以直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{width:100px; height:100px; background:red; position:absolute; left:130px; top:120px; }

    </style>
</head>
<body>
<div id="box">
</div>
<script src="move.js"></script>
<script>
    var oBox = document.getElementById('box');
    var iRotate = 0;
    document.onmousemove = function(ev){
        var ev = ev||event;
        var disX = oBox.offsetLeft;
        var disY = oBox.offsetTop;
        var a = ev.clientX - disX;
        var b = ev.clientY - disY;
        var c = Math.sqrt(a*a+b*b);
       if(a>0&&b>0){
           iRotate = Math.asin(b/c)+90*Math.PI/180;
       }else if(a>0){
           iRotate = Math.asin(a/c);
       }
       if(a<0&&b>0){
           iRotate = -(Math.asin(b/c)+90*Math.PI/180);
       }else if(a<0){
           iRotate = Math.asin(a/c);
       }

 oBox.style.WebkitTransform = 'rotate('+iRotate+'rad)';

    }


</script>
</body>
</html>