原生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();
 * */