オリジナルJavaScript jsフルスクリーン漂うモバイル広告プラグイン

/**
 * @author li914
 *   ：        ---   
 *     ：2019-12-30
 * */

/**
 * config object      
 * timer number    
 * id number   ID
 * url string   
 * pic string     
 * title string   
 * width number     
 * height number     
 * left number        
 * top number        
 * step number     
 * delay number     
 * _top_ number       
 * _left_ number       
 * pause boolean     
 * backgroundColor string     
 * */
var suspendAds = function (config) {
    this.config = config;
    this.timer =null;
    this.id =1;
    this.url="#";
    this.pic="";
    this.title="       ";
    this.width=250;
    this.height=250;
    this.left=300;
    this.top=120;
    this.step=2;
    this.delay=40;
    this._top_=0;
    this._left_=0;
    this.pause=false;
    this.backgroundColor="rgb(225,225,225)";
};

suspendAds.prototype = {
    constructor : suspendAds,
    /**
     *   ：    
     * */
    start : function () {
        var that = this;
        if (!that.timer){
            this.__params__();
            this.__create__();
        }
        if (!that.pause){
            that.timer = setInterval(function () {
                that.__change__()
            },this.delay);
        }
    },
    /**
     *   ：    
     * */
    stop:function(){
        if (this.timer){
            clearInterval(this.timer);
        }
    },
    /**
     *   ：                
     * */
    __params__:function () {
        var type = Object.prototype.toString.call(this.config).toLowerCase().split(" ");
        type = type[1].substr(0,type[1].length-1);
        if (type==="object"){
            for (var key in this.config){
                if (this.hasOwnProperty(key)){
                    this[key] = this.config[key];
                }
            }
        }
    },
    /**
     *   ：  dom  ，        
     * */
    __create__:function () {
        var that = this;
        var pfgg = document.createElement("div");
        pfgg.setAttribute("id","PFGG-"+that.id);
        pfgg.setAttribute("title",that.title);
        pfgg.style.left = that.left+"px";
        pfgg.style.top = that.top+"px";
        pfgg.style.width = that.width+"px";
        pfgg.style.height = (that.height+16)+"px";
        pfgg.style.position = "absolute";
        pfgg.style.zIndex = "99999999";
        pfgg.style.display = "block";

        var top = document.createElement("div");
        top.style.height = "16px";
        top.style.textAlign = "right";
        top.style.width = (that.width)+"px";

        var content = document.createElement("div");
        content.style.height = (that.height)+"px";
        content.style.width = that.width+"px";
        content.innerText = that.id;

        var a = document.createElement("a");
        a.style.display = "block";
        a.style.width = that.width+"px";
        a.style.height = that.height+"px";
        a.setAttribute('href',that.url);

        if (that.pic){
            var img = document.createElement('img');
            img.src = that.pic;
            img.style.display = "block";
            img.style.width = that.width+"px";
            img.style.height = that.height+"px";
            content.innerText = "";
            a.appendChild(img);
        }else {
            content.style.backgroundColor = that.backgroundColor;
        }

        var span = document.createElement('span');
        span.setAttribute("id","PFGG-SPAN-"+that.id);
        span.setAttribute("title","  ");
        span.innerText = "  ";
        span.style.color = "red";
        span.style.display = "inline-block";
        span.style.lineHeight = "16px";
        span.style.textAlign = "center";
        span.style.float = "right";
        span.style.fontSize = "14px";
        span.style.cursor = "pointer";

        top.appendChild(span);
        content.appendChild(a);
        pfgg.appendChild(content);
        pfgg.appendChild(top);

        document.body.appendChild(pfgg);
        if (pfgg.addEventListener){
            document.getElementById("PFGG-"+this.id).addEventListener('mouseover',function (evt) {
                if (that.timer){
                    clearInterval(that.timer);
                }
            });
            document.getElementById("PFGG-"+this.id).addEventListener('mouseout',function (evt) {
                that.timer = setInterval(function () {
                    that.__change__();
                },that.delay);
            });
            document.getElementById("PFGG-SPAN-"+this.id).addEventListener('click',function (evt) {
                if (that.timer){
                    clearInterval(that.timer);
                }
                pfgg.style.display = "none";
                that.pause = true;
            });
        } else {
            document.getElementById("PFGG-"+this.id).attachEvent('onmouseover',function (evt) {
                if (that.timer){
                    clearInterval(that.timer);
                }
            });
            document.getElementById("PFGG-"+this.id).attachEvent('onmouseout',function (evt) {
                that.timer = setInterval(function () {
                    that.__change__();
                },that.delay);
            });
            document.getElementById("PFGG-SPAN-"+this.id).attachEvent('onclick',function (evt) {
                if (that.timer){
                    clearInterval(that.timer);
                }
                pfgg.style.display = "none";
                that.pause = true;
            });
        }

    },
    /**
     *   ：            
     * */
    __change__:function () {
        if (this.pause){
            return this;
        }
        //           
        this.__width__ = document.documentElement.clientWidth;
        this.__height__ = document.documentElement.clientHeight;
        document.getElementById("PFGG-" +this.id).style.left = (this.left + document.documentElement.scrollLeft) + "px";
        document.getElementById("PFGG-" + this.id).style.top = (this.top + document.documentElement.scrollTop) + "px";
        // _top_  1      
        if (this._top_){
            this.top = this.top + this.step;
        }else {
            this.top = this.top - this.step;
        }
        if (this.top<0){
            this._top_ = 1;
            this.top = 0;
        }
        //      
        if (this.top>(this.__height__ - this.height)){
            this._top_ = 0;
            this.top = this.__height__ - this.height;
        }
        // _left_  1      
        if (this._left_){
            this.left = this.left + this.step;
        }else {
            this.left = this.left - this.step;
        }
        if (this.left<0){
            this._left_ = 1;
            this.left = 0;
        }
        //      
        if (this.left>(this.__width__ - this.width)){
            this._left_ = 0;
            this.left = this.__width__ - this.width;
        }
    }
};

/**
 *     ：
 *
 * var suspendAd = new suspendAds({id:55,left:125,_top_:1,_left_:1,title:"  "});
 *       
 * suspendAd.start();
 *       
 *suspendAd.stop();
 * */