js網(wǎng)頁(yè)右下角提示框?qū)嵗?/h1>
更新時(shí)間:2014年10月14日 10:38:18 投稿:shichen2014
這篇文章主要介紹了js網(wǎng)頁(yè)右下角提示框的實(shí)現(xiàn)方法,以實(shí)例展示了css樣式與HTML布局,以及對(duì)應(yīng)的js顯示與關(guān)閉提示框等功能,需要的朋友可以參考下
本文實(shí)例講述了js網(wǎng)頁(yè)右下角提示框的實(shí)現(xiàn)方法,分享給大家供大家參考。具體方法如下:
html代碼部分如下:
復(fù)制代碼 代碼如下:<style type="text/css">
.messageTip{border-right: #455690 1px solid; border-top: #a6b4cf 1px solid; border-left: #a6b4cf 1px solid; border-bottom: #455690 1px solid; z-index:99999; left: 0px; top: 0px; visibility:hidden; width: 230px; position: absolute; background:#cfdef4; text-align:left}
.messageTip .close{position:absolute; right:0px; font-weight:bold; padding:4px 4px 0 0;}
.messageTip .close a{color:red;font-size:12px; text-decoration:none;}
.messageTip .content{border-top: #ffffff 1px solid; border-left: #ffffff 1px solid}
.messageTip .content .title{color: #1f336b; padding-top: 4px;padding-left: 4px; height:22px;}
.messageTip .content .msg{border-right: #b9c9ef 1px solid;border-left: #728eb8 1px solid; border-top: #728eb8 1px solid; padding:10px; margin:1px}
</style>
<script type="text/javascript" src="/js/base.js"></script>
<div id="eMeng" class="messageTip">
<div class="close"><a href="javascript:msgTip.close();" title="關(guān)閉">×</a></div>
<div class="content">
<div class="title">系統(tǒng)提示:</div>
<div class="msg">
內(nèi)容
</div>
</div>
</div>
js代碼部分如下:
復(fù)制代碼 代碼如下:function messageTip(pJso) {
_.init(this, pJso, {
name: 'msg'//提示框標(biāo)簽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) {
/*
這里可以設(shè)置自動(dòng)幾秒后關(guān)閉
...
*/
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) {
}
},
//關(guān)閉提示框
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); };
希望本文所述對(duì)大家的web程序設(shè)計(jì)有所幫助。
相關(guān)文章
-
javascript實(shí)現(xiàn)div浮動(dòng)在網(wǎng)頁(yè)最頂上并帶關(guān)閉按鈕效果實(shí)例
我們有時(shí)會(huì)看到有些網(wǎng)站最頂部一直會(huì)跟著我們滾動(dòng)而滾動(dòng)了,這種方法其實(shí)很簡(jiǎn)單,下面我來給大推薦一個(gè)javascript實(shí)現(xiàn)div浮動(dòng)在網(wǎng)頁(yè)最頂上并帶關(guān)閉按鈕效果 2013-08-08
-
js刪除數(shù)組元素、清空數(shù)組的簡(jiǎn)單方法(必看)
下面小編就為大家?guī)硪黄猨s刪除數(shù)組元素、清空數(shù)組的簡(jiǎn)單方法(必看)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧 2016-07-07
-
JS實(shí)現(xiàn)audio音頻剪裁剪切復(fù)制播放與上傳(步驟詳解)
這篇文章主要介紹了JS實(shí)現(xiàn)audio音頻剪裁剪切復(fù)制播放與上傳,本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下 2020-07-07
-
js 本地預(yù)覽的簡(jiǎn)單實(shí)現(xiàn)方法
本篇文章主要是對(duì)js本地預(yù)覽的簡(jiǎn)單實(shí)現(xiàn)方法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助 2014-02-02
-
ECharts柱狀圖過多添加滾動(dòng)條的步驟(親測(cè)可用)
這篇文章主要介紹了ECharts柱狀圖過多添加滾動(dòng)條的步驟(親測(cè)可用),添加echarts柱狀圖滾動(dòng)條,首先添加js用來判斷當(dāng)前視圖要顯示幾個(gè)及是否顯示滾動(dòng)條,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友參考下吧 2024-01-01
-
基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)雨滴特效
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)動(dòng)態(tài)雨滴特效并且點(diǎn)擊雨滴會(huì)有雨滴爆裂的效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下 2022-06-06
-
原生JS實(shí)現(xiàn)京東查看商品點(diǎn)擊放大
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)京東查看商品點(diǎn)擊放大,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
2020-12-12
-
微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能,結(jié)合實(shí)例形式分析了微信小程序多選框功能實(shí)現(xiàn)、布局顯示及全選、取消全選相關(guān)操作技巧,需要的朋友可以參考下 2019-05-05
最新評(píng)論
本文實(shí)例講述了js網(wǎng)頁(yè)右下角提示框的實(shí)現(xiàn)方法,分享給大家供大家參考。具體方法如下:
html代碼部分如下:
.messageTip{border-right: #455690 1px solid; border-top: #a6b4cf 1px solid; border-left: #a6b4cf 1px solid; border-bottom: #455690 1px solid; z-index:99999; left: 0px; top: 0px; visibility:hidden; width: 230px; position: absolute; background:#cfdef4; text-align:left}
.messageTip .close{position:absolute; right:0px; font-weight:bold; padding:4px 4px 0 0;}
.messageTip .close a{color:red;font-size:12px; text-decoration:none;}
.messageTip .content{border-top: #ffffff 1px solid; border-left: #ffffff 1px solid}
.messageTip .content .title{color: #1f336b; padding-top: 4px;padding-left: 4px; height:22px;}
.messageTip .content .msg{border-right: #b9c9ef 1px solid;border-left: #728eb8 1px solid; border-top: #728eb8 1px solid; padding:10px; margin:1px}
</style>
<script type="text/javascript" src="/js/base.js"></script>
<div id="eMeng" class="messageTip">
<div class="close"><a href="javascript:msgTip.close();" title="關(guān)閉">×</a></div>
<div class="content">
<div class="title">系統(tǒng)提示:</div>
<div class="msg">
內(nèi)容
</div>
</div>
</div>
js代碼部分如下:
_.init(this, pJso, {
name: 'msg'//提示框標(biāo)簽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) {
/*
這里可以設(shè)置自動(dòng)幾秒后關(guān)閉
...
*/
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) {
}
},
//關(guān)閉提示框
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); };
希望本文所述對(duì)大家的web程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript實(shí)現(xiàn)div浮動(dòng)在網(wǎng)頁(yè)最頂上并帶關(guān)閉按鈕效果實(shí)例
我們有時(shí)會(huì)看到有些網(wǎng)站最頂部一直會(huì)跟著我們滾動(dòng)而滾動(dòng)了,這種方法其實(shí)很簡(jiǎn)單,下面我來給大推薦一個(gè)javascript實(shí)現(xiàn)div浮動(dòng)在網(wǎng)頁(yè)最頂上并帶關(guān)閉按鈕效果2013-08-08js刪除數(shù)組元素、清空數(shù)組的簡(jiǎn)單方法(必看)
下面小編就為大家?guī)硪黄猨s刪除數(shù)組元素、清空數(shù)組的簡(jiǎn)單方法(必看)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07JS實(shí)現(xiàn)audio音頻剪裁剪切復(fù)制播放與上傳(步驟詳解)
這篇文章主要介紹了JS實(shí)現(xiàn)audio音頻剪裁剪切復(fù)制播放與上傳,本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07js 本地預(yù)覽的簡(jiǎn)單實(shí)現(xiàn)方法
本篇文章主要是對(duì)js本地預(yù)覽的簡(jiǎn)單實(shí)現(xiàn)方法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02ECharts柱狀圖過多添加滾動(dòng)條的步驟(親測(cè)可用)
這篇文章主要介紹了ECharts柱狀圖過多添加滾動(dòng)條的步驟(親測(cè)可用),添加echarts柱狀圖滾動(dòng)條,首先添加js用來判斷當(dāng)前視圖要顯示幾個(gè)及是否顯示滾動(dòng)條,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友參考下吧2024-01-01基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)雨滴特效
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)動(dòng)態(tài)雨滴特效并且點(diǎn)擊雨滴會(huì)有雨滴爆裂的效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06原生JS實(shí)現(xiàn)京東查看商品點(diǎn)擊放大
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)京東查看商品點(diǎn)擊放大,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能,結(jié)合實(shí)例形式分析了微信小程序多選框功能實(shí)現(xiàn)、布局顯示及全選、取消全選相關(guān)操作技巧,需要的朋友可以參考下2019-05-05