js网页右下角提示框实例_javascript技巧
html代码部分如下:
js代码部分如下:
_.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程序设计有所帮助。
推荐阅读
-
js类的静态属性和实例属性的理解_javascript技巧
-
JS操作CSS随机改变网页背景实现思路_javascript技巧
-
js 文本滚动效果的实例代码_javascript技巧
-
JS将表单导出成EXCEL的实例代码_javascript技巧
-
js 实现打印网页中定义的部分内容的代码_javascript技巧
-
js 实现打印网页中定义的部分内容的代码_javascript技巧
-
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)_javascript技巧
-
JS+CSS实现一个气泡提示框_javascript技巧
-
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序_javascript技巧
-
js控制不同的时间段显示不同的css样式的实例代码_javascript技巧