Javascriptプラグイン--フローティングウィンドウ

お客様はこのようなページにフローティングウィンドウをネストする必要があるため、クリックすると指定されたサイトにリンクできるというニーズがあります.実はネット上には似たようなプラグインがたくさんあります.js、jqueryは多くのものを見つけることができます.後で考えてみましたが、自分で書くことにしました.よく知っていてください.実際にどのプラグインを書くにも、まず自分のニーズを理解しなければなりません.それからやっと進むことができて、ここで私は構造関数の設計モードといくつかの簡単な実現論理(もちろんアルゴリズムとも呼ばれます)、いわゆる設計モードとアルゴリズム、つまり生活の中のいくつかの例と思想を使って、ただ心ある人だけで、総括して改善の結果を加えます.工場モードに有利で、最初は工場の流れに基づいているのではないでしょうか.観察者モードは私が前に書いた村のラッパや哨兵の役に似ていますか.アルゴリズムについては、泡のソート、つまり子供たちがどのように迅速にソートしたのか、私の下の論理のように、私は左の原理を利用して、窓の4つの方向を漂って、私は座標軸の4つの方向を理解して、境界に着くたびに1つのxあるいはyを変えることができて需要を満たすことができて、もちろん4つの座標の点を定義することもできます.
皆さんがデザインモードやアルゴリズムを見ているときは、デザインモードやアルゴリズムそのものにこだわらず、実際に結びつけたほうがいい、あるいは今知らない、あるいは仕事で使ったことがない、大丈夫、後での仕事で知らず知らずのうちに使ってしまうかもしれません.
コード:

/**
 * @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に変更