html代码部分如下:
代码如下:
 script>
 ×
 
 系统提示:
 
 内容
 
 
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) <= (_this.docHeight - _this.divHeight + parseInt(document.body.scrollTop, 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程序设计有所帮助。
下载本文