网页特效观止|CHINAHTML|---页面右下角弹出类似QQ或MSN的消息提示

最新推荐文章于 2024-08-12 09:24:46 发布
最新推荐文章于 2024-08-12 09:24:46 发布
阅读量771 收藏
点赞数
分类专栏： html与javascript 文章标签： qq function class javascript null action
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoliang_run/article/details/2866355
版权
  1. <HTML><HEAD>   
  2. <TITLE>网页特效观止|CHINAHTML|---页面右下角弹出类似QQ或MSN的消息提示</TITLE>   
  3. <SCRIPT language=JavaScript>     
  4. <!--     
  5.      
  6. /**//*    
  7. **    ============================================================    
  8. **    类名：CLASS_MSN_MESSAGE    
  9. **    功能：提供类似MSN消息框    
  10. **    示例：    
  11.     --------------------------------------------------------------------------------------  
  12.     
  13.             var MSG = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示：","您有1封消息","今天请我吃饭哈");    
  14.                 MSG.show();    
  15.     
  16.     -------------------------------------------------------------------------------------  
  17. **    作者：ttyp    
  18. **    邮件：ttyp@21cn.com    
  19. **      
  20. **    ============================================================   
  21. **/     
  22.      
  23.      
  24. /**//*    
  25. *    消息构造    
  26. */     
  27. function CLASS_MSN_MESSAGE(id,width,height,caption,title,message,target,action){     
  28.     this.id     = id;     
  29.     this.title  = title;     
  30.     this.caption= caption;     
  31.     this.message= message;     
  32.     this.target = target;     
  33.     this.action = action;     
  34.     this.width    = width?width:200;     
  35.     this.height = height?height:120;     
  36.     this.timeout= 500;     
  37.     this.speed    = 120;    
  38.     this.step    = 1;    
  39.     this.right    = screen.width -1;     
  40.     this.bottom = screen.height;    
  41.     this.left    = this.right - this.width;    
  42.     this.top    = this.bottom - this.height;    
  43.     this.timer    = 0;    
  44.     this.pause    = false;   
  45.     this.close    = false;   
  46.     this.autoHide    = true;   
  47. }     
  48.      
  49. /**//*    
  50. *    隐藏消息方法    
  51. */     
  52. CLASS_MSN_MESSAGE.prototype.hide = function(){     
  53.     if(this.onunload()){     
  54.   
  55.         var offset  = this.height>this.bottom-this.top?this.height:this.bottom-this.top;    
  56.         var me  = this;     
  57.   
  58.         if(this.timer>0){      
  59.             window.clearInterval(me.timer);     
  60.         }     
  61.   
  62.         var fun = function(){     
  63.             if(me.pause==false||me.close){   
  64.                 var x  = me.left;    
  65.                 var y  = 0;    
  66.                 var width = me.width;    
  67.                 var height = 0;    
  68.                 if(me.offset>0){    
  69.                     height = me.offset;    
  70.                 }    
  71.         
  72.                 y  = me.bottom - height;    
  73.         
  74.                 if(y>=me.bottom){    
  75.                     window.clearInterval(me.timer);     
  76.                     me.Pop.hide();     
  77.                 } else {    
  78.                     me.offset = me.offset - me.step;     
  79.                 }    
  80.                 me.Pop.show(x,y,width,height);       
  81.             }                
  82.         }     
  83.   
  84.         this.timer = window.setInterval(fun,this.speed)         
  85.     }     
  86. }     
  87.      
  88. /**//*    
  89. *    消息卸载事件，可以重写    
  90. */     
  91. CLASS_MSN_MESSAGE.prototype.onunload = function() {     
  92.     return true;     
  93. }     
  94. /**//*    
  95. *    消息命令事件，要实现自己的连接，请重写它    
  96. *    
  97. */     
  98. CLASS_MSN_MESSAGE.prototype.oncommand = function(){     
  99.     //this.close = true;   
  100.     this.hide();     
  101.  window.open("http://www.baidu.com");   
  102.       
  103. }    
  104. /**//*    
  105. *    消息显示方法    
  106. */     
  107. CLASS_MSN_MESSAGE.prototype.show = function(){     
  108.   
  109.     var oPopup = window.createPopup(); //IE5.5+     
  110.        
  111.     this.Pop = oPopup;     
  112.      
  113.     var w = this.width;     
  114.     var h = this.height;     
  115.      
  116.     var str = "<DIV style='BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 0px; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: " + w + "px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: " + h + "px; BACKGROUND-COLOR: #c9d3f3'>"     
  117.         str += "<TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0>"     
  118.         str += "<TR>"     
  119.         str += "<TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24></TD>"     
  120.         str += "<TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'>" + this.caption + "</TD>"     
  121.         str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19>"     
  122.         str += "<SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD>"     
  123.         str += "</TR>"     
  124.         str += "<TR>"     
  125.         str += "<TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height=" + (h-28) + ">"     
  126.         str += "<DIV style='BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; PADDING-BOTTOM: 8px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 8px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%'>" + this.title + "<BR><BR>"     
  127.         str += "<DIV style='WORD-BREAK: break-all' align=left><A href='javascript:void(0)' hidefocus=false id='btCommand'><FONT color=#ff0000>" + this.message + "</FONT></A>fghfghfghghghgh<A href='http://www.sohu.com' hidefocus=false id='ommand'><FONT color=#ff0000>dfgdfgfg</FONT></A></DIV>"     
  128.         str += "</DIV>"     
  129.         str += "</TD>"     
  130.         str += "</TR>"     
  131.         str += "</TABLE>"     
  132.         str += "</DIV>"     
  133.      
  134.     oPopup.document.body.innerHTML = str;    
  135.        
  136.      
  137.     this.offset  = 0;    
  138.     var me  = this;     
  139.   
  140.     oPopup.document.body.onmouseover = function(){me.pause=true;}   
  141.     oPopup.document.body.onmouseout = function(){me.pause=false;}   
  142.   
  143.     var fun = function(){     
  144.         var x  = me.left;    
  145.         var y  = 0;    
  146.         var width    = me.width;    
  147.         var height    = me.height;    
  148.   
  149.             if(me.offset>me.height){    
  150.                 height = me.height;    
  151.             } else {    
  152.                 height = me.offset;    
  153.             }    
  154.   
  155.         y  = me.bottom - me.offset;    
  156.         if(y<=me.top){    
  157.             me.timeout--;    
  158.             if(me.timeout==0){    
  159.                 window.clearInterval(me.timer);     
  160.                 if(me.autoHide){   
  161.                     me.hide();    
  162.                 }   
  163.             }    
  164.         } else {    
  165.             me.offset = me.offset + me.step;    
  166.         }    
  167.         me.Pop.show(x,y,width,height);       
  168.   
  169.     }     
  170.      
  171.     this.timer = window.setInterval(fun,this.speed)         
  172.      
  173.         
  174.      
  175.     var btClose = oPopup.document.getElementById("btSysClose");     
  176.      
  177.     btClose.onclick = function(){     
  178.         me.close = true;   
  179.         me.hide();     
  180.     }     
  181.      
  182.     var btCommand = oPopup.document.getElementById("btCommand");     
  183.     btCommand.onclick = function(){     
  184.         me.oncommand();     
  185.     }       
  186.   var ommand = oPopup.document.getElementById("ommand");     
  187.       ommand.onclick = function(){     
  188.        //this.close = true;   
  189.     me.hide();     
  190.  window.open(ommand.href);   
  191.     }      
  192. }     
  193. /**//*   
  194. ** 设置速度方法   
  195. **/    
  196. CLASS_MSN_MESSAGE.prototype.speed = function(s){    
  197.     var t = 20;    
  198.     try {    
  199.         t = praseInt(s);    
  200.     } catch(e){}    
  201.     this.speed = t;    
  202. }    
  203. /**//*   
  204. ** 设置步长方法   
  205. **/    
  206. CLASS_MSN_MESSAGE.prototype.step = function(s){    
  207.     var t = 1;    
  208.     try {    
  209.         t = praseInt(s);    
  210.     } catch(e){}    
  211.     this.step = t;    
  212. }    
  213.      
  214. CLASS_MSN_MESSAGE.prototype.rect = function(left,right,top,bottom){    
  215.     try {    
  216.         this.left        = left    !=null?left:this.right-this.width;    
  217.         this.right        = right    !=null?right:this.left +this.width;    
  218.         this.bottom        = bottom!=null?(bottom>screen.height?screen.height:bottom):screen.height;    
  219.         this.top        = top    !=null?top:this.bottom - this.height;    
  220.     } catch(e){}    
  221. }    
  222. var MSG1 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示：","您有1封消息","今天请我吃饭哈");     
  223.     MSG1.rect(null,null,null,screen.height-50);    
  224.     MSG1.speed    = 10;    
  225.     MSG1.step    = 5;    
  226.     //alert(MSG1.top);    
  227.     MSG1.show();     
  228.   
  229. //同时两个有闪烁，只能用层代替了，不过层不跨框架    
  230. //var MSG2 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示：","您有2封消息","好的啊");     
  231. //   MSG2.rect(100,null,null,screen.height);    
  232. //    MSG2.show();     
  233. //-->     
  234. </SCRIPT>    
  235.   
  236. <META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>    
  237. <BODY></BODY></HTML>  
xiaoliang_run
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html桃花特效,页面上桃花飘飘 - 网页特效代码|网页特效观止 - 让你的网页靓起来！...
weixin_35902426的博客
06-04 1206
页面上桃花飘飘[ 发布者：luwei┊来源：本站整理┊时间：2005-10-23┊浏览：人次 ]网页特效|Linkweb.cn/Js|---页面上桃花飘飘 var plumsrc="images/flower.gif"// Configure below to change number of plum to rendervar no = 15;var ns4up = (document...
c语言星空特效源代码,星空 - 网页特效代码|网页特效观止 - 让你的网页靓起来！...
weixin_30558697的博客
05-23 2361
星空[ 发布者：luwei┊来源：本站整理┊时间：2005-10-23┊浏览：人次 ]网页特效|Linkweb.cn/Js|---星空#sDiv0, #sDiv1, #sDiv2, #sDiv3, #sDiv4, #sDiv5, #sDiv6, #sDiv7, #sDiv8, #sDiv9{position:absolute; height:1; width:1; font-family:aria...
asp.net 页面右下角弹出类似QQ或MSN的消息提示
weixin_33856370的博客
11-25 140
<HTML><HEAD> <TITLE>网页特效观止|JsCode.CN|---页面右下角弹出类似QQ或MSN的消息提示</TITLE> <SCRIPT language=JavaScript> <!-- /**//* ** ===================...
html网页特效 礼花,礼花背景 - 网页特效代码|网页特效观止 - 让你的网页靓起来！...
weixin_35858450的博客
06-04 284
礼花背景[ 发布者：luwei┊来源：本站整理┊时间：2005-10-23┊浏览：人次 ]网页特效|Linkweb.cn/Js|---礼花背景style="BACKGROUND: #ffffff; FONT-SIZE: 2px; HEIGHT: 2px; POSITION: relative; WIDTH: 2px">style="BACKGROUND: #fff000; FONT-SIZE...
页面右下角弹出类似QQ或MSN的消息提示
阿丰的专栏
03-31 96
[code="java"] 网页特效观止|CHINAHTML|---页面右下角弹出类似QQ或MSN的消息提示 [/code]
页面右下角弹出类似QQ或MSN的消息提示*摘
wenzi_li的专栏
09-13 100
[code] 网页特效观止|CHINAHTML|---页面右下角弹出类似QQ或MSN的消息提示 [/code]
页面右下角弹出类似QQ或MSN的消息提示（转）
weixin_30265171的博客
03-25 112
以前看见了个居于AJAX的仿MSN的控件，无意间发现了这个，它的优点是在1.x也可以用，所以转过来跟大家分享下。 <HTML><HEAD><TITLE>网页特效观止|JsCode.CN|---页面右下角弹出类似QQ或MSN的消息提示</TITLE><SCRIPTlanguage=JavaScript><!--/**/...
超酷超绚精美图片展示效果代码 - 网页特效观止
11-23
超酷超绚精美图片展示效果代码 - 网页特效观止-网页特效代码
仿google首页下端图片文字导航 - 网页特效观止-网页特效代码
01-09
"仿google首页下端图片文字导航 - 网页特效观止-网页特效代码"这个标题指的是一个网页设计项目，其目的是模仿谷歌（Google）官方网站底部的图片与文字结合的导航栏。这个特效是网页设计中的一种常见元素，用于提升...
openstack-utils工具包
07-06
openstack-utils-2017.11+git.1480685772.571a0f8-1.1.noarch.rpm，方便完成OpenStack配置文件的快速修改，命令格式为：openstack-config --set 。
spice-html5-0.1.1-1.fc18.noarch.rpm
05-31
spice-html5的rpm包
spice-html5-0.1.0-1.fc18.noarch.rpm
05-31
spice-html5的rpm包
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 416
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 570
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
Electron学习与总结
最新发布
song854601134的博客
08-12 114
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 306
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
"几何学观止-基本群部分及曲线曲面论-熊锐著(2018.11.29)
《几何学观止》是一本涵盖了古典几何、代数拓扑、微分几何和代数几何等多个领域的数学著作。在本书中，作者通过精心编排的章节内容，通俗易懂地介绍了这些数学分支的基本理论和应用。 第一章是关于点集拓扑的介绍。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值