HTML实例——鼠标跟随

最新推荐文章于 2025-03-19 16:25:52 发布

Code进阶狼人

最新推荐文章于 2025-03-19 16:25:52 发布

阅读量3.3k

点赞数

分类专栏： web前端文章标签： html css

本文链接：https://blog.youkuaiyun.com/liuzuoping/article/details/103718048

版权

web前端专栏收录该内容

19 篇文章

订阅专栏

Event举例

1：鼠标跟随

代码实现：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 5000px;
        }

        img {
            position: absolute;
            padding: 10px 0;
            border: 1px solid #ccc;
            cursor: pointer;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
<img src="" width="100" height="100"/>

<script>
    //需求：点击页面的任何地方，图片跟随鼠标移动到点击位置。
    //思路：获取鼠标在页面中的位置，然图片缓慢运动到鼠标点击的位置。
    //  兼容ie67做pageY和pageX；
    //  原理：     鼠标在页面的位置 = 被卷去的部分+可视区域部分。
    //步骤：
    //1.老三步。
    //2.获取鼠标在页面中的位置。
    //3.利用缓动原理，慢慢的运动到指定位置。（包括左右和上下）

    //1.老三步。
    var img = document.getElementsByTagName("img")[0];
    var timer = null;
    var targetx = 0;
    var targety = 0;
    var leaderx = 0;
    var leadery = 0;
    //给整个文档绑定点击事件获取鼠标的位置。
    document.onclick = function (event) {
        //新五步
        //兼容获取事件对象
        event = event || window.event;
        //鼠标在页面的位置 = 被卷去的部分+可视区域部分。
        var pagey = event.pageY || scroll().top + event.clientY;
        var pagex = event.pageX || scroll().left + event.clientX;

        targety = pagey - 30;
        targetx = pagex - 50;

        //要用定时器，先清定时器
        clearInterval(timer);
        timer = setInterval(function () {
            //为盒子的位置获取值
            leaderx = img.offsetLeft;
            //获取步长
            var stepx = (targetx - leaderx) / 10;
            //二次处理步长
            stepx = stepx > 0 ? Math.ceil(stepx) : Math.floor(stepx);
            leaderx = leaderx + stepx;
            //赋值
            img.style.left = leaderx + "px";


            //为盒子的位置获取值
            leadery = img.offsetTop;
            //获取步长
            var stepy = (targety - leadery) / 10;
            //二次处理步长
            stepy = stepy > 0 ? Math.ceil(stepy) : Math.floor(stepy);
            leadery = leadery + stepy;
            //赋值
            img.style.top = leadery + "px";

            //清定时器
            if (Math.abs(targety - img.offsetTop) <= Math.abs(stepy) && Math.abs(targetx - img.offsetLeft) <= Math.abs(stepx)) {
                img.style.top = targety + "px";
                img.style.left = targetx + "px";
                clearInterval(timer);
            }
        }, 30);
    }

</script>

</body>
</html>