使用offsetWidth,clientWidth,scrollLeft等属性写一个鼠标跟随事件

所谓鼠标跟随，就是把你设置的那个跟随物随着鼠标的点击的位置进行索引，然后以动画的形式到达鼠标点击的位置。

下面是整个代码片，欢迎下载使用：

html代码段：

<img src="img.jpg" alt="" width="50" height="50" id="pic"/>

图片自己找一个喜欢的图片放进去或者其他东西即可，用我的图片也行，如下所示

css代码段：

这个css代码不多，完全是为了固定它再屏幕的左上角，所以left=0;top=0,里面的*号适用于整个页面。

        * {
            margin: 0;
            padding: 0
        }

        img {
            position: absolute;
            top: 0;
            left: 0;
        }

js代码段：

当你写js代码时，第一个任务就是定义一个对象，然后获取它的id,才能对其进行操作。

<script>
    var pic = document.getElementById("pic");
    //需求：鼠标在页面上点击 获取点击时的位置 然后让图片以动画效果飞过来
    document.onclick = function (event) {
        var event = event || window.event;
        //鼠标在页面上的位置
        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        //计算图片应该到的位置
        var targetX = pageX - pic.offsetWidth / 2;
        var targetY = pageY - pic.offsetHeight / 2;
        //让图片以动画效果飞过来
        animate(pic, {"top": targetY, "left": targetX});
    };
</script>

以下这个js代码是已经封装好的，直接引用，几乎适合所有动画效果的代码

function animate(obj, json, fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var flag = true;
            for (var k in json) {
                if (k === "opacity") {
                    var leader = getStyle(obj, k) * 100;
                    var target = json[k] * 100;
                    var step = (target - leader) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step;
                    obj.style[k] = leader / 100;
                } else if (k === "zIndex") {
                    obj.style.zIndex = json[k];
                } else {
                    var leader = parseInt(getStyle(obj, k)) || 0;
                    var target = json[k];
                    var step = (target - leader) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step;
                    obj.style[k] = leader + "px";
                }
                if (leader != target) {
                    flag = false;
                }
            }
            if (flag) {
                clearInterval(obj.timer);
                if (fn) {
                    fn();
                }
            }
        }, 15);
    }
    function getStyle(obj, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(obj, null)[attr];
        } else {
            return obj.currentStyle[attr];
        }
    }

但如果有道友有更好的答案或者哪里不明白的，顺手留个言，谢谢！