js網頁右下角提示框實例_javascript技巧-js教程-PHP中文網

js網頁右下角提示框實例_javascript技巧

WBOY

發布： 2016-05-16 16:34:16

原創

1359 人瀏覽過

本文範例講述了js網頁右下角提示框的實作方法，分享給大家供大家參考。具體方法如下：

html程式碼部分如下：

複製程式碼程式碼如下:

系統提示：

內容

js程式碼部分如下：

複製程式碼程式碼如下:

function messageTip(pJso) {
    _.init(this, pJso, {
        name: 'msg'//提示框標籤ID
    });
    this.eMsg = document.getElementById(this.name);
}

messageTip.prototype =
{
    //提示框總是最右下角
    rePosition: function(_this) {
        var divHeight = parseInt(_this.eMsg.offsetHeight, 10);
        var divWidth = parseInt(_this.eMsg.offsetWidth, 10);
        var docWidth = document.body.clientWidth;
        var docHeight = document.body.clientHeight;
        _this.eMsg.style.top = docHeight - divHeight parseInt(document.body.scrollTop, 10);
        _this.eMsg.style.left = docWidth - divWidth parseInt(document.body.scrollLeft, 10);
    },

    //提示框慢慢往上升
    moveDiv: function(_this) {
        /*
        這裡可以設定自動幾秒後關閉
        ...
        */
        try {
            if (parseInt(_this.eMsg.style.top, 10)                 window.clearInterval(_this.objTimer);
                _this.objTimer = window.setInterval(function() { _this.rePosition(_this); }, 1);
            }
            _this.divTop = parseInt(_this.eMsg.style.top, 10);
            _this.eMsg.style.top = _this.divTop - 1;
        }
        catch (e) {
        }
    },

    //關閉提示框
    close: function() {
        this.eMsg.style.visibility = 'hidden';
        if (this.objTimer) window.clearInterval(this.objTimer);
    },

    //顯示提示框
    show: function() {
        var divTop = parseInt(this.eMsg.style.top, 10);
        this.divTop = divTop;
        var divLeft = parseInt(this.eMsg.style.left, 10);

var divHeight = parseInt(this.eMsg.offsetHeight, 10);
this.divHeight = divHeight;

        var divWidth = parseInt(this.eMsg.offsetWidth, 10);
        var docWidth = document.body.clientWidth;
        var docHeight = document.body.clientHeight;
        this.docHeight = docHeight;

        this.eMsg.style.top = parseInt(document.body.scrollTop, 10) docHeight 10;
        this.eMsg.style.left = parseInt(document.body.scrollLeft, 10) docWidth - divWidth;
        this.eMsg.style.visibility = "visible";

        var _this = this;
        this.objTimer = window.setInterval(function() { _this.moveDiv(_this); }, 10);
    }
}

var msgTip = new messageTip({ name: 'eMeng' });
window.onload = function() { msgTip.show(); };
window.onresize = function() { msgTip.rePosition(msgTip); };

希望本文所述對大家的web程式設計有幫助。