Beispiel eines Eingabeaufforderung Box in der unteren rechten Ecke der JS -Webseite

Dieser Artikel beschreibt die Implementierungsmethode des Eingabeaufforderung in der unteren rechten Ecke der JS -Webseite und wird für Ihre Referenz bei Ihnen freigegeben. Die spezifischen Methoden sind wie folgt:

Der HTML -Code -Teil lautet wie folgt:

Kopieren Sie den Code wie folgt: <style type = "text/css">

.MessAgetip {Border-Light: #455690 1PX Solid; Border-Top: #A6B4CF 1PX Solid; Border-Links: #A6B4CF 1PX Solid; Border-Bottom: #455690 1PX Solid; Z-Index: 99999; links: 0px; Oben: 0px; Sichtbarkeit: versteckt; Breite: 230px; Position: absolut; Hintergrund:#cfdef4; text-align: links}

.MessAgetip .CLOSE {Position: absolut; Rechts: 0px; Schriftgewicht: fett; Polsterung: 4px 4px 0 0;}

.MessAgetip .CLOSE A {Farbe: rot; Schriftgröße: 12px; Textdekoration: Keine;}

.MessAgetip .Content {Border-Top: #ffffff 1px Solid; Border-Links: #ffffff 1px Solid}

.MessAgetip .Content .title {color: #1f336b; Padding-Top: 4px; Padding-Links: 4px; Höhe: 22px;}

.MessAgetip .Content .msg {Border-Light: #b9c9ef 1px solide; Border-Links: #728EB8 1PX Solid; Border-Top: #728EB8 1PX Solid; Polsterung: 10px; Rand: 1px}

</style>

<script type = "text/javaScript" src = "/js/base.js"> </script>

<div id = "emeng">

<div> <a href = "JavaScript: msgtip.close ();"> × </a> </div>

<div>

<Div> System Eingabeaufforderung: </div>

<div>

Inhalt

</div>

</div>

</div>

Der JS -Code -Teil lautet wie folgt:

Kopieren Sie den Code wie folgt: Funktion MessAgetip (PJSO) {

_.init (this, pjso, {

Name: 'msg' // Eingabeaufforderung Box Tag -ID

});

this.emsg = document.getElementById (this.name);

}

MessAgetip.Prototype =

{

// Das Eingabeaufforderung Box befindet sich immer in der unteren rechten Ecke

Reposition: Funktion (_this) {

var divheight = parseInt (_this.emsg.offseteight, 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);

},

// Die Eingabeaufforderung Box steigt langsam an

bewegt: function (_this) {

/*

Hier können Sie es nach ein paar Sekunden ausschalten

...

*/

versuchen {

if (parseInt (_this.emsg.style.top, 10) <= (_this.docheight - _this.divHeight + ParseInt (document.body.scrolltop, 10)) {

window.clearinterval (_this.objimer);

_this.objimer = window.setInterval (function () {_this.reposition (_this);}, 1);

}

_this.divtop = parseInt (_this.emsg.style.top, 10);

_this.emsg.style.top = _this.divtop - 1;

}

fangen (e) {

}

},

// Schließen Sie die Eingabeaufforderung Box

schließen: function () {

this.emsg.style.visibility = 'versteckt';

if (this.objimer) window.clearInterval (this.objimer);

},

// die Eingabeaufforderung Box anzeigen

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.offseteight, 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 = "sichtbar";

var _this = this;

this.objimer = window.setInterval (function () {_this.movediv (_this);}, 10);

}

}

var msgtip = new MessAgetip ({name: 'emeng'});

window.onload = function () {msgtip.show (); };

window.onResize = function () {msgtip.Reposition (msgtip); };

Ich hoffe, dieser Artikel wird für die Webprogrammierung aller hilfreich sein.