国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 語言 > JavaScript > 正文

javascript實現的右下角彈窗實例

2024-05-06 16:18:34
字體:
來源:轉載
供稿:網友

這篇文章主要介紹了javascript實現的右下角彈窗,實例分析了javascript實現右下角彈窗的完整實現步驟與技巧,需要的朋友可以參考下

本文實例講述了javascript實現的右下角彈窗的方法。分享給大家供大家參考。具體如下:

 

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  6. <title>右下角的彈窗</title> 
  7. <style type="text/css"
  8. body { background:#333333;} 
  9. #winpop { 
  10. width:200px; height:0px;  
  11. position:absolute; right:0; bottom:0; 
  12. border:1px solid #999999; margin:0; padding:1px; 
  13. overflow:hidden; display:none; background:#FFFFFF 
  14. #winpop .title { 
  15. width:100%; height:20px; 
  16. line-height:20px; background:#FFCC00; 
  17. font-weight:bold; text-align:center; 
  18. font-size:12px; 
  19. #winpop .con { 
  20. width:100%; height:80px; 
  21. line-height:80px; font-weight:bold; 
  22. font-size:12px; color:#FF0000; 
  23. text-decoration:underline; text-align:center 
  24. #silu { 
  25. font-size:13px; color:#999999; 
  26. position:absolute; right:0; 
  27. text-align:right; text-decoration:underline; 
  28. line-height:22px; 
  29. .close { 
  30. position:absolute; right:4px; top:-1px; 
  31. color:#FFFFFF; cursor:pointer 
  32. </style> 
  33. <script type="text/javascript"
  34. function tips_pop(){ 
  35. var MsgPop=document.getElementById("winpop"); 
  36. var popH=parseInt(MsgPop.style.height); 
  37. if (popH==0){  
  38. MsgPop.style.display="block"
  39. show=setInterval("changeH('up')",2); 
  40. else {  
  41. hide=setInterval("changeH('down')",2); 
  42. function changeH(str) { 
  43. var MsgPop=document.getElementById("winpop"); 
  44. var popH=parseInt(MsgPop.style.height); 
  45. if(str=="up"){  
  46. if (popH<=100){  
  47. MsgPop.style.height=(popH+4).toString()+"px"
  48. else
  49. clearInterval(show); 
  50. if(str=="down"){ 
  51. if (popH>=4){  
  52. MsgPop.style.height=(popH-4).toString()+"px"
  53. else{  
  54. clearInterval(hide);  
  55. MsgPop.style.display="none";  
  56. window.onload=function(){  
  57. document.getElementById('winpop').style.height='0px'
  58. setTimeout("tips_pop()",800);  
  59. </script> 
  60. </head> 
  61. <body> 
  62. 內容展示內容展示內容展示內容展示內容展示 
  63. 內容展示內容展示內容展示內容展示內容展示 
  64. 內容展示內容展示內容展示內容展示內容展示 
  65. <hr> 
  66. <div id="silu"
  67. <button onclick="tips_pop()">測試按鈕</button> 
  68. </div> 
  69. <div id="winpop"
  70. <div class="title">您有新的消息 
  71. <span class="close" onclick="tips_pop()">X</span></div> 
  72. <div class="con">未讀信息(1)</div> 
  73. </div> 
  74. <div>http://www.survivalescaperooms.com/</div> 
  75. </body> 
  76. </html> 

希望本文所述對大家的javascript程序設計有所幫助。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表

圖片精選

主站蜘蛛池模板: 永仁县| 酉阳| 嘉鱼县| 闵行区| 桂平市| 金乡县| 堆龙德庆县| 常山县| 公安县| 鄂伦春自治旗| 桐庐县| 格尔木市| 洛扎县| 河东区| 滦平县| 昌黎县| 上栗县| 屏南县| 上虞市| 三河市| 裕民县| 宾川县| 定陶县| 肥东县| 保亭| 萝北县| 和硕县| 正阳县| 平谷区| 富民县| 阿图什市| 顺昌县| 年辖:市辖区| 马尔康县| 阜平县| 满洲里市| 瑞金市| 敖汉旗| 遂川县| 镇沅| 康保县|