`
rjhym
  • 浏览: 67120 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery制作右下角定时消息框

 
阅读更多

经常看到网页右下角有消息框弹出。自己使用jquery只做一个。<wbr></wbr>

准备:下载jquery-1.5.1.js,jquery.messager.js,jquery.timers.js文件。

编写html文件:

<div id="jquerydiv"></div>
<script type="text/javascript"src="jquery-1.3.min.js"></script>
<script type="text/javascript"src="jquery.messager.js"></script>
<script type="text/javascript"src="jquery.timers.js"></script>
<script>
$(document).everyTime('5s',function(){

$.messager.show(0,'送你一个Jquery Messager消息弹出插件!',2000);

});
</script>

执行即可!

插件介绍:

jQuery Timers插件 提供定时执行的功能,使用非常简单。
提供了三个函式  1. everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成])  2. oneTime(时间间隔, [计时器名称], 呼叫的函式)  3. stopTime ([计时器名称], [函式名称])
/*************************************************************   *   everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成])   *************************************************************/    //每1秒执行函式test()  function test(){     //do something...  }  $('body').everyTime('1s',test);     //每1秒执行  $('body').everyTime('1s',function(){   //do something...  });     //每1秒执行,并命名计时器名称为A  $('body').everyTime('1s','A',function(){   //do something...  });     //每20秒执行,最多5次,并命名计时器名称为B  $('body').everyTime('2das','B',function(){   //do something...  },5);     //每20秒执行,无限次,并命名计时器名称为C  //若时间间隔抵到,但函式程序仍未完成则需等待执行函式完成后再继续计时  $('body').everyTime('2das','C',function(){      //执行一个会超过20秒以上的程式  },0,true);     /***********************************************************   *   oneTime(时间间隔, [计时器名称], 呼叫的函式)   ***********************************************************/  //倒数10秒后执行  $('body').oneTime('1das',function(){   //do something...  });     //倒数100秒后执行,并命名计时器名称为D  $('body').oneTime('1hs','D',function(){   //do something...  });     /************************************************************   *  stopTime ([计时器名称], [函式名称])   ************************************************************/  //停止所有的在$('body')上计时器  $('body').stopTime ();     //停止$('body')上名称为A的计时器  $('body').stopTime ('A');     //停止$('body')上所有呼叫test()的计时器  $('body').stopTime (test);    自定义时间单位  打开源代码  找到  powers: {     // Yeah this is major overkill...     'ms': 1,     'cs': 10,     'ds': 100,     's': 1000,     'das': 10000,     'hs': 100000,     'ks': 1000000    }  可以定制自己想要的单位。
jquery messager 使用。
<script type="text/javascript">
$(document).ready(function(){
 $.messager.show(0,'送你一个Jquery Messager消息弹出插件!');
 $("#showMessager300x200").click(function(){
 $.messager.lays(300, 200);
 $.messager.show(0, '300x200的消息',60000);
 });
 $("#showMessagerFadeIn").click(function(){
 $.messager.anim('fade', 2000);
 $.messager.show(0, 'fadeIn动画消息');
 });
 $("#showMessagerShow").click(function(){
 $.messager.anim('show', 1000);
 $.messager.show(0, 'show动画消息');
 });
 $("#showMessagerDim").click(function(){
 $.messager.show('<font color=red>自定义标题</font>', '<font color=green style="font-size:14px;font-weight:bold;">自定义内容</font>');
 });
 $("#showMessagerSec").click(function(){
 $.messager.show(0, '一秒钟关闭消息', 1000);
 });
});
</script>
分享到:
评论

相关推荐

    jQuery屏幕右下角消息提示框

    在这个例子中,jQuery可能被用来动态更新这些坐标,以确保消息框始终出现在屏幕的右下角。 `jQuery的slideUp()`函数是实现消息框隐藏动画的关键。这是一个动画方法,它会将元素的height逐渐减小到0,从而“滑动”地...

    jQuery右下角弹出提示框代码.zip

    本资源"jQuery右下角弹出提示框代码.zip"提供了一个实现点击关闭后显示下一条消息提示框的功能,这对于用户交互和信息提示非常有用。 首先,我们来详细了解一下jQuery中的弹出提示框。在传统的JavaScript中,我们...

    jQuery右下角弹出层插件_可最小化和定时自动关闭

    本篇文章将详细讲解基于jQuery实现的右下角弹出层插件,该插件具备可最小化和定时自动关闭的功能。 一、jQuery右下角弹出层插件基础 1. 插件设计:弹出层通常用于显示通知、消息或者进行用户交互,而放置在屏幕右...

    页面设计,网页右下方弹出框,类似QQ,或者CSDN右下角的提示框

    在网页设计中,创建一个类似QQ或CSDN右下角的提示框是常见的功能,主要用于显示消息通知、广告信息或是交互反馈。这种提示框通常称为"气泡通知"或"浮层提示",它不干扰用户的主要操作,又能有效地传递信息。下面将...

    类似QQ,MSN,邮箱右下角消息提示,定时访问数据库。

    “QQ消息框,邮箱提示框”暗示了这个项目可能包括了模仿这些常见通讯工具的界面元素和交互方式,比如弹出式的消息窗口,当新消息到达时,会在屏幕的右下角显示一个浮动窗口,用户可以点击查看详细内容或者关闭提示。...

    asp.net类似QQ,MSN,邮箱右下角消息提示,定时访问数据库。

    在ASP.NET中实现类似QQ、MSN或邮箱右下角的消息提示功能,主要是通过实时更新用户界面来提供即时反馈,这通常涉及到AJAX技术、Web Socket、SignalR等实时通信技术。 首先,我们要理解这个功能的核心需求:当有新...

    页面右下角弹出类似QQ或MSN的消息提示

    综上所述,实现"页面右下角弹出类似QQ或MSN的消息提示"这一功能,涉及到前端的JavaScript编程、CSS样式设计、动画效果实现,以及可能的后端实时通信。通过合理的技术选型和设计,可以创造出高效且用户友好的消息提示...

    仿阿里妈妈的右下角浮动窗口

    在IT行业中,创建一个仿阿里妈妈的右下角浮动窗口是一项常见的前端开发任务,它涉及到网页交互设计和用户体验优化。这种浮动窗口通常用于显示广告、通知或者提供客服服务,能够吸引用户注意力,同时不会过度打扰他们...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    43.jQuery漂亮网页右上角双层撕角广告代码 44.jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45.jQuery演示Ajax加载并显示图片的相片画廊实例 46.jQuery版Sexy Lightbox 2.3内容...

    使用jquery制作弹出框效果

    《使用jQuery制作弹出框效果:深入解析jDialog插件》 在网页设计中,弹出框是一种常见的交互元素,用于向用户展示重要的信息或进行交互操作。jQuery库以其强大的DOM操作和事件处理能力,成为了制作弹出框的首选工具...

    DWR 实现QQ消息提示

    4. **消息框实现**:为了模仿QQ的消息提示框,可以使用HTML和CSS创建一个可定位在屏幕右下角的弹出框,然后利用JavaScript或者jQuery来控制它的显示和隐藏。消息内容可以作为参数传递给JavaScript函数,动态更新在...

    各种JS特效汇总

    这个特效模拟了QQ或MSN的消息提示框,当有新消息时,一个提示框会从页面的右下角弹出。实现这个功能的关键是使用JavaScript来监听事件,并动态创建DOM元素以展示消息。同时,还需要考虑动画效果,如渐显渐隐、滑入...

    CSS+DIV 菜单控制

    4. **页面右下角弹出类似QQ或MSN的消息提示**: 这种功能常见于即时通讯软件,也可以用于网站通知或广告。通常,它会使用CSS创建一个绝对定位的元素,初始状态为隐藏,当需要显示时,通过CSS动画或JavaScript控制其...

    HTML5手机微信聊天界面代码

    比如,使用`border-radius`属性可以设置气泡的圆角,`float`属性可以使消息左对齐或右对齐以区分发送者和接收者,`position`属性配合`top`和`left`可实现气泡的相对定位。 3. **JavaScript(JS)**:JavaScript是...

    ExtAspNet_v2.3.2_dll

    -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs3.0.3。 -修正弹出对话框的宽度计算错误(会保持最小的状态)。 -增加新的皮肤Gray。 -为示例工程添加改变语言和皮肤的下拉列表。...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs3.0.3。 -修正弹出对话框的宽度计算错误(会保持最小的状态)。 -增加新的皮肤Gray。 -为示例工程添加改变语言和皮肤的下拉列表。...

Global site tag (gtag.js) - Google Analytics