js實(shí)現(xiàn)仿MSN帶關(guān)閉功能的右下角彈窗代碼
本文實(shí)例講述了js實(shí)現(xiàn)仿MSN帶關(guān)閉功能的右下角彈窗代碼。分享給大家供大家參考。具體如下:
這是一款非常精致漂亮的仿MSN右下角彈出窗口,帶關(guān)閉功能,直接復(fù)制代碼就管用。演示要用到幾個(gè)小圖片,運(yùn)行的時(shí)候點(diǎn)擊右鍵保存一下,這里提供一種思路,并不完全局限于此種方法,熟能生巧。
先來看看運(yùn)行效果截圖:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-f-msn-close-able-adv-codes/
具體代碼如下:
<HTML> <HEAD> <title>仿MSN右下角彈窗</title> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <SCRIPT language=Javascript> document.writeln("<div id=\"msn\" style=\"BORDER-RIGHT:#455690 1px solid; BORDER-TOP:#a6b4cf 1px solid; Z-INDEX:99999; LEFT:0px; BORDER-LEFT:#a6b4cf 1px solid; WIDTH:180px; BORDER-BOTTOM:#455690 1px solid; POSITION:absolute; TOP:0px; HEIGHT:116px; BACKGROUND-COLOR:#c9d3f3\">"); document.writeln("<table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"BORDER-TOP:#ffffff 1px solid; BORDER-LEFT:#ffffff 1px solid\" bgcolor=\"#cfdef4\">"); document.writeln("<tr><td height=\"24\" width=\"26\" style=\"FONT-SIZE:12px;BACKGROUND-IMAGE:url(images/msgTopBg.gif);COLOR:#0f2c8c\" valign=\"middle\"><img src=\"images/msgLogo.gif\" hspace=\"5\" align=\"absMiddle\" vspace=\"1\"\/><\/td>"); document.writeln("<td style=\"FONT-WEIGHT:normal;FONT-SIZE:9pt;BACKGROUND-IMAGE:url(images/msgTopBg.gif);COLOR:#1f336b;PADDING-TOP:4px\" valign=\"middle\" width=\"100%\">提示:<\/td>"); document.writeln("<td style=\"BACKGROUND-IMAGE:url(images/msgTopBg.gif);PADDING-TOP:2px\" valign=\"middle\" width=\"19\" align=\"right\"><img src=\"images/msgClose.gif\" hspace=\"3\" style=\"CURSOR:pointer\" onclick=\"closeDiv()\" title=\"關(guān)閉\"\/><\/td>"); document.writeln("<\/tr><tr><td colspan=\"3\" height=\"90\" style=\"PADDING-RIGHT:1px;BACKGROUND-IMAGE:url(images/msgBottomBg.jpg);PADDING-BOTTOM:1px\">"); document.writeln("<div style=\"BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 9pt; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%\"><a href=\"/jscss/\" target=\"_blank\" style=\"FONT-WEIGHT:bold;COLOR:red\">>>游客:歡迎回來!<\/a><br><br><a href=\"http:/\" target=\"_blank\" style=\"FONT-WEIGHT:bold;COLOR:blue\">>>您有(0)條短信息。<\/a><\/div><\/div><\/tr><\/table><\/div>"); msn.style.top=document.body.clientHeight-174; msn.style.left=document.body.clientWidth-225; moveR(); function moveR() { msn.style.top=document.body.scrollTop+document.body.clientHeight-116; msn.style.left=document.body.scrollLeft+document.body.clientWidth-180; setTimeout("moveR();",80) } function closeDiv(){ msn.style.visibility='hidden'; } </SCRIPT> </HEAD> <BODY style="MARGIN: 0px; TEXT-ALIGN: center"> <table width="776" border="0" cellpadding="0" cellspacing="0" bgcolor="#eeeeee"> <tr> <td height="1060" align="center" valign="top"><p><br> </p> <p> </p> </td> </tr> </table> </BODY> </HTML>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
- JS如何實(shí)現(xiàn)在彈出窗口中加載頁面
- 禁止iframe頁面的所有js腳本如alert及彈出窗口等
- js實(shí)現(xiàn)彈出窗口、頁面變成灰色并不可操作的例子分享
- JavaScript頁面刷新與彈出窗口問題的解決方法
- js右下角彈出窗口,點(diǎn)擊可關(guān)閉效果
- js實(shí)現(xiàn)右下角窗口彈出窗口效果
- JS封裝的模仿qq右下角消息彈窗功能示例
- 純js的右下角彈窗實(shí)例
- JS實(shí)現(xiàn)簡單的右下角彈出提示窗口完整實(shí)例
- JS非Alert實(shí)現(xiàn)網(wǎng)頁右下角“未讀信息”效果彈窗
- javascript實(shí)現(xiàn)的右下角彈窗實(shí)例
- js 右下角彈窗效果代碼(IE only)
- javascript實(shí)現(xiàn)簡約的頁面右下角點(diǎn)擊彈出窗口示例【測試可用】
相關(guān)文章
實(shí)例講解JavaScript中call、apply、bind方法的異同
這篇文章主要以實(shí)例講解的方式為大家總結(jié)了JavaScript中call、apply、bind方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09JavaScript判斷頁面是否滾動(dòng)到底部的技巧
在 JavaScript 中,我們可以通過一些技巧來判斷頁面是否滾動(dòng)到底部,本文將介紹一些常用的方法,幫助你在項(xiàng)目中實(shí)現(xiàn)這一功能,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11JavaScript中防抖和節(jié)流的區(qū)別及適用場景
這篇文章主要介紹了JavaScript中防抖和節(jié)流的區(qū)別及適用場景,文章通過圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-05-05Asp.Net alert彈出提示信息的幾種方法總結(jié)
本篇文章主要是對Asp.Net alert彈出提示信息的幾種方法進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01javascript鼠標(biāo)跟隨運(yùn)動(dòng)3種效果(眼球效果,蘋果菜單,方向跟隨)
在很多網(wǎng)站上能看到圖片跟隨鼠標(biāo)移動(dòng)的JS特效,其實(shí)做法很簡單,本文就介紹了很多javascript鼠標(biāo)跟隨運(yùn)動(dòng),在這里與大家分享下。2016-10-10如何使用ES6的class類繼承來實(shí)現(xiàn)絢麗小球效果
JS是由ES(ECMAScript)、DOM(瀏覽器文檔對象)、BOM(瀏覽器對象模型)組成,這篇文章主要給大家介紹了關(guān)于如何使用ES6的class類繼承來實(shí)現(xiàn)絢麗小球效果的相關(guān)資料,需要的朋友可以參考下2021-06-06javascript實(shí)現(xiàn)帶下拉子菜單的導(dǎo)航菜單效果
這篇文章主要介紹了javascript實(shí)現(xiàn)帶下拉子菜單的導(dǎo)航菜單效果的方法,涉及javascript操作頁面元素與樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05