js實(shí)現(xiàn)類似MSN提示的頁面效果代碼分享
這是一篇基于javascript實(shí)現(xiàn)了模仿MSN消息提示的效果,推薦給大家,感興趣的小伙伴們可以參考一下。
運(yùn)行效果圖:----------------------查看效果-----------------------
小提示:瀏覽器中如果不能正常運(yùn)行,可以嘗試切換瀏覽模式。
為大家分享的模仿MSN消息提示的效果代碼如下
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="Keywords" content="51windows.Net"> <META NAME="Author" CONTENT="haiwa"> <title>類似MSN提示的頁面效果</title> </head> <body scroll=no> 看到右下角的提示了嗎?如果沒有看到,<button onclick=location.reload();>刷新</button>一下 <script language="JavaScript"> window.onload = getMsg; window.onresize = resizeDiv; window.onerror = function(){} //短信提示使用(asilas添加) var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0; function getMsg() { try{ divTop = parseInt(document.getElementById("eMeng").style.top,10) divLeft = parseInt(document.getElementById("eMeng").style.left,10) divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10) divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10) docWidth = document.body.clientWidth; docHeight = document.body.clientHeight; document.getElementById("eMeng").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeight document.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth document.getElementById("eMeng").style.visibility="visible" objTimer = window.setInterval("moveDiv()",10) } catch(e){} } function resizeDiv() { i+=1 if(i>500) closeDiv() try{ divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10) divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10) docWidth = document.body.clientWidth; docHeight = document.body.clientHeight; document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10) document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10) } catch(e){} } function moveDiv() { try { if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10))) { window.clearInterval(objTimer) objTimer = window.setInterval("resizeDiv()",1) } divTop = parseInt(document.getElementById("eMeng").style.top,10) document.getElementById("eMeng").style.top = divTop - 1 } catch(e){} } function closeDiv() { document.getElementById('eMeng').style.visibility='hidden'; if(objTimer) window.clearInterval(objTimer) } </script> <DIV id=eMeng style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #c9d3f3"> <TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgColor=#cfdef4 border=0> <TBODY> <TR> <TD style="FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #0f2c8c" width=30 height=24></TD> <TD style="FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #1f336b; PADDING-TOP: 4px;PADDING-left: 4px" vAlign=center width="100%"> 短消息提示:</TD> <TD style="BACKGROUND-IMAGE: url(msgTopBg.gif); PADDING-TOP: 2px;PADDING-right:2px" vAlign=center align=right width=19><span title=關(guān)閉 style="CURSOR: hand;color:red;font-size:12px;font-weight:bold;margin-right:4px;" onclick=closeDiv() >×</span><!-- <IMG title=關(guān)閉 style="CURSOR: hand" onclick=closeDiv() hspace=3 src="msgClose.jpg"> --></TD> </TR> <TR> <TD style="PADDING-RIGHT: 1px; BACKGROUND-IMAGE: url(1msgBottomBg.jpg); PADDING-BOTTOM: 1px" colSpan=3 height=90> <DIV style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%">您有<font color=#FF0000>1</font>封新短消息<BR><BR> <DIV align=center style="word-break:break-all"><a href="javascript:alert('你好')"><font color=#FF0000>點(diǎn)擊查看短信</font></a></DIV </DIV> </TD> </TR> </TBODY> </TABLE> </DIV> </body> </html>
以上就是為大家分享的模仿MSN消息提示的效果代碼,希望大家可以喜歡。
相關(guān)文章
JavaScript實(shí)現(xiàn)模仿桌面窗口的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)模仿桌面窗口的方法,可實(shí)現(xiàn)模仿桌面窗口的打開、關(guān)閉、移動(dòng)、縮放及最大化、最小化等功能,需要的朋友可以參考下2015-07-07uni-app彈出層uni-popup使用及修改默認(rèn)樣式的方法實(shí)例
我們?cè)谑褂胾niapp開發(fā)的時(shí)候,有時(shí)可以使用uniapp自有的樣式模板,這樣可以提高開發(fā)效率,下面這篇文章主要給大家介紹了關(guān)于uni-app彈出層uni-popup使用及修改默認(rèn)樣式的相關(guān)資料,需要的朋友可以參考下2022-11-11JS關(guān)于for循環(huán)中使用setTimeout的四種解決方案
這篇文章主要介紹了JS關(guān)于for循環(huán)中使用setTimeout的四種解決方案,想深入了解JS的同學(xué),一定要看下2021-05-05JS動(dòng)態(tài)添加與刪除select中的Option對(duì)象(示例代碼)
本篇文章主要介紹了JS動(dòng)態(tài)添加與刪除select中的Option對(duì)象(示例代碼) 需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12使用JS簡(jiǎn)單實(shí)現(xiàn)apply、call和bind方法的實(shí)例代碼
在JavaScript中,call、apply和bind是Function對(duì)象自帶的三個(gè)方法,這三個(gè)方法的主要作用是改變函數(shù)中的this指向,下面這篇文章主要給大家介紹了關(guān)于如何使用JS簡(jiǎn)單實(shí)現(xiàn)apply、call和bind方法的相關(guān)資料,需要的朋友可以參考下2022-02-02一個(gè)可以隨意添加多個(gè)序列的tag函數(shù)
由于在沒有規(guī)劃好的情況下寫的這個(gè)代碼,寫的比較粗糙,也沒有添加注釋。 JavaScript代碼和HTML完全分離;可以隨意添加多個(gè)子div標(biāo)簽,自動(dòng)擴(kuò)展2009-07-07innerText innerHTML的用法以及注意事項(xiàng) [推薦]
我們常常需要使用另外一些對(duì)象的屬性來實(shí)現(xiàn)動(dòng)態(tài)改變其中的文本,它們就是:innerText,outerText,innerHTML,outerHTML,千萬要注意它們的大小寫,因?yàn)殄e(cuò)一點(diǎn)您就得不到預(yù)期的效果了。2009-05-05瀏覽器解析js生成的html出現(xiàn)樣式問題的解決方法
接觸css, javascript有三年多了,今天遇到的問題最令我不可思議,很容易給人一種錯(cuò)覺,那就是js拼成的html結(jié)構(gòu)肯定有問題2012-04-04javascript中導(dǎo)出與導(dǎo)入實(shí)現(xiàn)模塊化管理教程
這篇文章主要給大家介紹了關(guān)于javascript中導(dǎo)出與導(dǎo)入實(shí)現(xiàn)模塊化管理的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12