Javascript插件--飘窗

由于客户有这么一个需要再网页中嵌套一个飘窗，然后点击的时候可以链接到指定网站的这么一个需求，其实网上有很多类似的插件，js、jquery都能找到很多，后来想了一下，还是决定自己写一个，熟悉一下，其实写任何插件都应该先理清楚自己的需求，然后才能进行下去，这里我用到了构造函数设计模式和一些简单的实现逻辑（当然了也可以称之为算法），所谓的设计模式和算法，也就是生活中的一些例子和思想，只不过是有心人，总结并加以改进的结果。利于工厂模式，估计最开始也就是根据工厂的流程来的吧，观察者模式是不是有点像我之前写的村子的大喇叭，或者是哨兵的角色？至于算法，冒泡排序，可能也就是一群小孩总结的怎么快速排序的呢，像我下面的逻辑，我就是利用左边的原理，飘窗的四个方向，我一下理解成了坐标轴的四个方向，每次到达边界的时候改变一个x或者y就能满足需求，当然也可以定义四个坐标的点也未尝不可。

建议如果大家看设计模式或者算法的时候，不要拘泥于设计模式和算法本身，结合实际更好，或者说你现在不知道，或者工作中没有用过，也没关系，可能在以后的工作中不知不觉的就用上了。

代码：

/**
 * @author cangowu
 * @date 2016.04.06
 * @constructor
 * 在网页中实现飘窗的功能
 * 可以自定义：
 * 窗口的起始位置：posLeft，posTop
 * 飘窗的大小：width，height
 * 飘窗的图片url，文字text以及连接link的值
 */
function FloatWindow() {
    this.domDiv;
    this.nWidth;
    this.nHeight;
    this.oTimer;
    this.oDirection = {
        x: 1,
        y: -1
    };
};
FloatWindow.prototype = {
    init: function (option) {
        if (typeof option === 'undefined') {
            option = {};
        }
        var opt = option;

        var sPosLeft = opt.posLeft || '0px',
            sPosTop = opt.posTop || '0px',
            sWidth = opt.width || '100px',
            sHeight = opt.height || '100px',
            nZIndex = opt.zIndex || '999',
            sHref = opt.href || '',
            sTarget = opt.target || '_blank',
            sUrl = opt.url || '',
            sText = opt.text || '';

        var domDiv = document.createElement('div');
        domDiv.style.position = 'fixed';
        domDiv.style.left = sPosLeft;
        domDiv.style.top = sPosTop;
        domDiv.style.zIndex = nZIndex;
        domDiv.style.width = sWidth;
        domDiv.style.height = sHeight;
        domDiv.style.backgroundColor = 'blue';

        var that = this;
        bindEvent(domDiv, 'mouseenter', function () {
            clearInterval(that.oTimer);
        });
        bindEvent(domDiv, 'mouseleave', function () {
            that.work();
        });

        var domLink = document.createElement('a');
        domLink.target = sTarget;
        domLink.href = sHref || '';

        if (opt.hasOwnProperty('url') && sUrl != '') {
            var domImg = document.createElement('img');
            domImg.src = sUrl;
            domImg.style.width = sWidth;
            domImg.style.height = sHeight;

            domLink.appendChild(domImg);
        } else {
            var domText = document.createElement('div');
            domText.innerHTML = sText;

            domLink.appendChild(domText);
        }

        domDiv.appendChild(domLink);

        var domClose = document.createElement('div');
        domClose.innerHTML = '×';
        domClose.style.position = 'absolute';
        domClose.style.top = '5px';
        domClose.style.right = '5px';
        domClose.style.color = 'blue';
        domClose.style.cursor = 'pointer';

        bindEvent(domClose, 'mouseenter', function () {
            this.style.color = 'red';
        });
        bindEvent(domClose, 'mouseleave', function () {
            this.style.color = 'blue';
        });
        bindEvent(domClose, 'click', function () {
            domDiv.parentNode.removeChild(domDiv);
        });

        domDiv.appendChild(domClose);

        document.body.appendChild(domDiv);

        this.domDiv = domDiv;
        this.nWidth = parseInt(sWidth.replace('px', ''));
        this.nHeight = parseInt(sHeight.replace('px', ''));

    },
    work: function () {
        var domDiv = this.domDiv,
            nWidth = this.nWidth,
            nHeight = this.nHeight,
            oDirection = this.oDirection;

        this.oTimer = setInterval(function () {
            var nLeft = 10 * oDirection.x + parseInt(domDiv.style.left.replace('px', ''));
            var nTop = 10 * oDirection.y + parseInt(domDiv.style.top.replace('px', ''));

            var nClientWidth = document.documentElement.clientWidth - nWidth - 2,
                nClientHeight = document.documentElement.clientHeight - nHeight - 2;

            /**
             * 这里主要是实现了方向的转换，大家可以参照坐标轴来，我上面定义的oDirection，就是先向右上角，顺时针旋转
             * 1.当到达顶部，改变y向下运动
             * 2.当到达右边，改变x向左运动
             * 3.当到达底部，改变y向上运动
             * 4.当到达左边，改变x向右运动
             */
            if (nTop < 0) {
                nLeft = nLeft + nTop ;
                nTop = 0;
                oDirection.y = 1;
            } else if (nLeft > nClientWidth) {
                nTop = nTop - (nLeft - nClientWidth);
                nLeft = nClientWidth;
                oDirection.x = -1;
            } else if (nTop > nClientHeight ) {
                nLeft = nLeft - (nTop - nClientHeight) ;
                nTop = nClientHeight ;
                oDirection.y = -1;
            } else if (nLeft < 0) {
                nTop = nTop + nLeft;
                nLeft = 0;
                oDirection.x = 1;
            }

            domDiv.style.left = nLeft + 'px';
            domDiv.style.top = nTop + 'px';
        }, 100);
    }
};

function bindEvent(elem, event, fun) {
    if (window.attachEvent) {
        elem.attachEvent('on' + event, fun);
    }
    else {
        elem.addEventListener(event, fun);
    }
}

function getScrollTop() {
    var scrollPos;
    if (window.pageYOffset) {
        scrollPos = window.pageYOffset;
    }
    else if (document.compatMode && document.compatMode != 'BackCompat') {
        scrollPos = document.documentElement.scrollTop;
    }
    else if (document.body) {
        scrollPos = document.body.scrollTop;
    }
    return scrollPos;
}


var floatWin = new FloatWindow();
var option = {
    posLeft: '0px',
    posTop: '0px',
    width: '100px',
    height: '200px',
    href: 'http://www.baidu.com',
    target: '_blank',
    url: 'wzg.jpg',
    text: '我是text'
};
floatWin.init(option);
floatWin.work();

更新：增加了z-index以及定位改成fixed