Contoh kotak gesaan di sudut kanan bawah js web page_javascript kemahiran

Contoh dalam artikel ini menerangkan kaedah pelaksanaan kotak gesaan di penjuru kanan sebelah bawah halaman web js dan mengongsinya dengan semua orang untuk rujukan anda. Kaedah khusus adalah seperti berikut:

Bahagian kod html adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

×

           

System prompt:

          

Kandungan
                                                                                              

Bahagian kod js adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

Petua mesej fungsi(pJso) {
_.init(ini, pJso, {
            nama: 'msg'//ID label kotak gesaan
});
This.eMsg = document.getElementById(this.name);
}

messageTip.prototype =
{
//Kotak gesaan sentiasa berada di sudut kanan bawah
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);
},

//Kotak gesaan perlahan-lahan naik
MoveDiv: function(_this) {
         /*
Di sini anda boleh menetapkannya untuk ditutup secara automatik selepas beberapa saat
...
*/
         cuba {
Jika (parseInt(_this.eMsg.style.top, 10) <= (_this.docHeight - _this.divHeight parseInt(document.body.scrollTop, 10))) {
                   tetingkap.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;
}
         tangkap (e) {
}
},
 
//Tutup kotak gesaan
Tutup: function() {
This.eMsg.style.visibility = 'tersembunyi';
If (this.objTimer) window.clearInterval(this.objTimer);
},

//Tunjukkan kotak gesaan
tunjukkan: 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 = "kelihatan";

var _ini = ini;
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 };

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan web semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn