自己写一个简单的页面飘浮框--方文锋的个人网站

最近公司项目有需求，就是需要在页面显示飘动的框，框里面显示一些公告等内容。然后自己就开始编写一个简单的飘浮框。
直接上代码：
 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>简单的页面飘浮框</title>
    <style type="text/css">
        #pfc {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 9999;
            min-width: 300px;
            min-height: 200px;
            max-width: 600px;
            max-height: 400px;
            background: #269abc;
        }
    </style>
</head>
<div id="pfc">
    <span style="position: absolute;right: 0;">╳</span>
</div>
<body>
<script type="text/javascript">
    /**
     * 漂浮窗
     * @param {string|object} ele
     * @param {number} nX X轴方向的步进
     * @param {number} nY Y轴方向的步进
     * @return {*}
     */
    function to_pfc(ele, nX, nY) {
        typeof ele === "string" && (ele = document.getElementById(ele));
        ele.style.display = "initial";
        var W = document.documentElement.clientWidth || window.innerWidth || window.screen.width;
        var H = document.documentElement.clientHeight || window.innerHeight || window.screen.height;
        //距离左侧最大距离
        var maxX = W - ele.offsetWidth;
        //距离顶部最大距离
        var maxY = H - ele.offsetHeight;
        //当前距离左侧的距离
        var X = parseInt(getCSS(ele, "left"), 10);
        //当前距离顶部的距离
        var Y = parseInt(getCSS(ele, "top"), 10);
        //X轴和Y轴的步进设置
        (nX || typeof nX === "number") || (nX = 1);
        (nY || typeof nY === "number") || (nY = 1);
        (typeof ele.nX === "number") || (ele.nX = nX);
        (typeof ele.nY === "number") || (ele.nY = nY);
        //边界判断
        if (X >= maxX || X < 0) {
            ele.nX = -ele.nX;
            (X > maxX) && (X = maxX);
            (X < 0) && (X = 0);
        }
        if (Y >= maxY || Y < 0) {
            ele.nY = -ele.nY;
            (Y > maxY) && (Y = maxY);
            (Y < 0) && (Y = 0);
        }
        //设置标签元素样式
        ele.style.left = (X + ele.nX) + "px";
        ele.style.top = (Y + ele.nY) + "px";
        console.log(ele.nX, ele.nY, X, Y, maxX, maxY);
        //开始动画
        clearTimeout(ele.idd);
        ele.idd = setTimeout(function () {
            to_pfc(ele, ele.nX, ele.nY, ele.stop);
        }, 1000 / 60);
        //停止动画
        if (typeof ele.stop !== "function") {
            ele.stop = function () {
                clearTimeout(ele.idd);
            };
        }
        //继续动画
        if (typeof ele.continue !== "function") {
            ele.continue = function () {
                to_pfc(ele, ele.nX, ele.nY);
            };
        }
        //关闭
        if (typeof ele.close !== "function") {
            ele.close = function (fn) {
                this.style.display = "none";
                typeof fn === "function" && fn.call(this);
                clearTimeout(ele.idd);
                //解除事件监听
                ele.onmouseout = null;
                ele.onmouseover = null;
            }
        }
        return ele;
    }

    /**
     * 获取css样式
     * @param obj
     * @param style_attr
     * @return {string}
     */
    function getCSS(obj, style_attr) {
        return window.getComputedStyle ? getComputedStyle(obj)[style_attr] : obj.currentStyle[style_attr];
    }

    setTimeout(function () {
        var ele = to_pfc("pfc", 1, 1);
        //停止动画
        ele.onmouseover = function (e) {
            ele.stop();
        };
        //继续动画
        ele.onmouseout = function (e) {
            ele.continue();
        };
        ele.addEventListener("click", function (e) {
            var e = e || window.event;
            var target = e.target || e.srcElement;
            //关闭
            if (target.tagName.toLocaleLowerCase() === "span") {
                ele.close();
            }
        }, true);
    }, 1000);
</script>
</body>
</html>
演示地址