<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    window.onmousemove = function (e) {
        e = e || window.event;
        var x= e.clientX;
        var y= e.clientY;
        var div=document.createElement("div");
        var st=30*Math.random();
        div.style.position="absolute";
        div.style.width=st+"px";
        div.style.height=st+"px";
        div.style.borderRadius="50%";
        div.style.backgroundColor = "rgb(" + Math.floor(Math.random() * 256)
                + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")"
        div.style.left = x+Math.random()*30-15 +"px";
        div.style.top = y+Math.random()*30-15 +"px";
        document.body.appendChild(div);
        animate(div,{
            "width":0,
            "height":0,
            "opacity":0
        },function(){
            document.body.removeChild(div);
        })
    }




    function animate(tag, obj, fn) {
        //第一步是在函数内分析参数传递过程
        //tag = box'
        //obj = {"width": 400,"height": 450,"opacity": 0.3,"zIndex": 6,"top": 220,"left": 220}
        //fn = function () {alert("今天天气不错");}  函数表达式
        clearInterval(tag.timer);
        tag.timer = setInterval(function () {
            //假设成立法:假设当前这次定时器可以清除
            var flag = true;

            //需要同时修改多个属性
            //对对象中的每一个属性进行操作
            for (var k in obj) {
                if (k == "opacity") {
                    //k - 属性名 - 字符串形式 - attr
                    //obj[k] - 属性值 - target
                    var target = obj[k] * 100;
                    //获取结果可能是一个小数
                    var leader = getStyle(tag, k) * 100 || 0;
                    //缓动运动公式
                    var step = (target - leader) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step;
                    //设置的时候
                    tag.style[k] = leader / 100;
                } else if (k == "zIndex") {
                    //直接设置层级,不需要渐变
                    tag.style.zIndex = obj[k];
                } else {
                    //普通的,带单位的样式
                    //k - 属性名 - 字符串形式 - attr
                    //obj[k] - 属性值 - target
                    var target = obj[k];
                    var leader = parseInt(getStyle(tag, k)) || 0;
                    //缓动运动公式
                    var step = (target - leader) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step;
                    //设置的时候
                    tag.style[k] = leader + "px";
                }

                //检测,当前这个属性是否到达了指定位置
                if (leader != target) {
                    //阻止清除定时器
                    flag = false;
                }
            }

            //我们需要保证obj中每一个obj都运动到位置
            if (flag) {
                clearInterval(tag.timer);

                if (typeof fn == "function") {
                    //调用
                    fn();
                }

            }
        }, 40);
    }

    function getStyle(tag, attr) {
        return tag.currentStyle ? tag.currentStyle[attr] : getComputedStyle(tag, null)[attr];


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