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

素颜马尾好姑娘i 2022-05-28 06:41 45阅读 0赞

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

这里主要运用到了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>

发表评论取消回复

表情：

评论列表（有 0 条评论，45人围观）

还没有评论，来说两句吧...

相关阅读

相关很容易！unity如何实现鼠标光标放在碰撞体上，物体变色？

介绍很容易！unity如何实现鼠标光标放在碰撞体上，物体变色？ ![在这里插入图片描述][6ff13d2d763e412ebfb9d771c7b8301f.png]

秒速五厘米/ 2023年09月28日 00:21/ 0 赞/ 2 阅读

相关 js时实现鼠标拖动div

实现js拖动div 实现步骤： 1. 鼠标按下时，标记元素为可拖动状态，并记下鼠标当前位置的偏移； 2. 鼠标开始移动，判断元素状态是否可以拖动，如果是则更新元素位置

清疚/ 2023年07月24日 05:37/ 0 赞/ 28 阅读

相关 html随着页面滑动,实现桌面和移动浏览器元素随页面滚动产生动画

该楼层疑似违规已被系统折叠隐藏此楼查看此楼实现桌面和移动浏览器元素随页面滚动产生动画的js插件 document.documentElement.classList.a

妖狐艹你老母/ 2022年10月06日 04:48/ 0 赞/ 57 阅读

相关 JavaScript原生实现广告栏滑动

全部代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

今天药忘吃喽~/ 2022年06月01日 06:49/ 0 赞/ 258 阅读

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

嗯，就是鼠标在窗口移动的时候，方块随着鼠标所在的位置转动方向这里主要运用到了Math.asin()方法，用这种方法求出的是弧度数不难，所以直接上代码 <!DO

素颜马尾好姑娘i/ 2022年05月28日 06:41/ 0 赞/ 46 阅读

相关原生js鼠标拖拽div左右滑动

![2018041314472714][] ![20180413144737216][] <!DOCTYPE html> <html lang="en">

一时失言乱红尘/ 2022年05月27日 06:54/ 0 赞/ 267 阅读

相关 js模拟鼠标滑动

/ @param id @param clientX 相对窗口横坐标 @param clientY 相对窗口纵坐标

电玩女神/ 2022年02月26日 05:46/ 0 赞/ 566 阅读

相关原生 JS 实现移动端 Touch 滑动反弹

什么是 `Touch`滑动？就是类似于 `PC`端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到 `Touch`事件结合 `js`去实现，效果如下： ![154763

短命女/ 2022年01月29日 20:21/ 0 赞/ 284 阅读

相关 vue/js - 实现页面自动往上滑动效果

最近做的新项目中要求让看不见的内容自动往上滑动一定的距离，使之可以看到，下面我来分享一下。效果图： ![在这里插入图片描述][20200102144258781.

客官°小女子只卖身不卖艺/ 2021年08月14日 01:50/ 0 赞/ 736 阅读

相关原生 js 实现移动端 Touch 滑动反弹

移动端 Touch 滑动反弹 > 什么是Touch滑动？就是类似于PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到Touch事件结合js去实现，效果如下：

秒速五厘米/ 2021年07月04日 20:37/ 0 赞/ 411 阅读