js特效——根据鼠标位置移动的图片-Toy模板网

这篇具有很好参考价值的文章主要介绍了js特效——根据鼠标位置移动的图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

js特效——根据鼠标位置移动的图片

基础概念

1、offsetX

offset意为偏移量,是事件对象距左上角为参考原点的距离。以元素盒子模型的内容区域的左上角为参考点。不包括border。

2、clientX

事件对象相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条

3、pageX

事件对象相对于整个文档的坐标以像素为单位.

4、screenX

事件对象相对于设备屏幕的左上角的坐标,当改变屏幕的分辨率的时候,坐标会随之改变.

以上除了screenX/Y以设备像素为单位，其他都是以css像素为单位

1、图片在鼠标的右下角跟随移动

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta>
    <title>Document</title>

    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.7.0.js"></script>

    <style>
        div {
            position: relative;
            width: 150px;
            height: 150px;
            background-image: url(./images/jingwu-1.png);
            background-size: 100%;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="pop"></div>

    <script>
        $(function () {
            // 提前创建一个变量，用来控制图片是否可拖拽
            var pop = $("#pop")
            // 保存鼠标相对于元素本身的坐标
            var canMove = false;
            // 在文档显示区拖拽图片
            var offsetX, offsetY;

            // 1.鼠标左键按下时允许拖拽-mousedown
            pop.mousedown(function (e) {
                // 鼠标左键按下时允许拖拽
                canMove = true;

                // 在鼠标按键按下时记录鼠标相对于元素本身的坐标
                offsetX = e.offsetX;
                offsetY = e.offsetY;
            })

            // 2.鼠标在移动过程中，当图片可拖拽时，记录图片移动的距离，并将图片移动到该位置-mousemove
            // left/top = 鼠标位置相对于文档显示区的坐标 - 鼠标位置相对于元素本身的位置
            window.onmousemove = function (e) {
                if (canMove == true) {
                    var left = e.clientX - offsetX;
                    var top = e.clientY - offsetY;
                }

                console.log("left = " + left);
                console.log("top = " + top);

                // 当图片超出页面区域禁止移动
                if (left <= 0) {
                    left = 0; // 左边
                } else if (left > window.innerWidth - 150) {
                    left = window.innerWidth - 150; // 右边
                } else if (top < 0) {
                    top = 0; // 上边
                } else if (top > window.innerHeight - 150) {
                    top = window.innerHeight - 150; // 下边
                }

                pop.css("left", left + "px");
                pop.css("top", top + "px");
            }

            // 3.鼠标左键抬起时不允许拖拽-mouseup
            pop.mouseup(function () {
                canMove = false;
            })
        })
    </script>
</body>

</html>

效果展示：

根据鼠标移动位置的图片

2、背景图片被鼠标拖拽移动

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta>
    <title>Document</title>

    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.7.0.js"></script>

    <style>
        img {
            width: 80px;
            height: 80px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <img src="images/bk_icon_FangDaJing.png" alt="">

    <script>
        $(function () {
            let imgEle = $("img")
            $("html").mousemove(function () {
                let x = window.event.clientX;
                var y = window.event.clientY;
                imgEle.css("top", y + "px");
                imgEle.css("left", x + "px");
            })
        })
    </script>
</body>

</html>