【js练习事件对象MouseEvent】图片跟随鼠标移动

【js练习事件对象MouseEvent】图片跟随鼠标移动

森特
森特 本破站站长
2022-09-14 / 0 评论 / 119 阅读/  正在检测是否收录...
温馨提示:
本文最后更新于2022年09月14日,已超过621天没有更新,若内容或图片失效,请留言反馈。
【js练习事件对象MouseEvent】图片跟随鼠标移动
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>js_练习事件对象MouseEvent</title>
    <link rel="shortcut icon" href="https://sherryz-1251102061.cos.ap-guangzhou.myqcloud.com/image/Favicon.png">
    <style>
        /*图片移动需要用到绝对定位,子绝父相,父元素需要设置相对定位*/
        body{
            position: relative;
        }
        /*这里移动图片用到的是绝对定位,如果是背景图片,可以用background-position来移动*/
        body img{
            position: absolute;
            /*transform来让图片居中*/
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <img src="angel.gif" width="60px" height="60px">
    <script>
        // 获得图片元素
        var img = document.querySelector('img'); 
        // 给document网页注册事件监听器,只要鼠标移动,就会触发
        document.addEventListener('mousemove',function(e){
            var museX = e.pageX; // 获得鼠标所在位置的X轴
            var museY = e.pageY; // 获得鼠标所在位置的Y轴
            img.style.top = +museY+'px'; // 修改图片元素样式top等于鼠标所在位置的Y轴
            img.style.left = +museX+'px'; // 修改图片元素样式left等于鼠标所在位置的X轴
        })

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

0

打赏

海报

正在生成.....

评论 (0)

取消