jQuery实现新消息在网页标题闪烁提示


Posted in Javascript onJune 23, 2015

可能有一些站长会注意到这样的效果,就是我们在一些SNS社交、社区论坛浏览时,经常会看到收到的新消息会闪烁标题提示,那么这样的效果我们能不能运用在 自己的网站呢,新消息在网页标题闪烁显示的效果如何实现?小编有幸在某牛人技术博客看到这样的代码,基于jquery框架。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<base href="<%=basePath%>"> 
<title>My JSP 'test.jsp' starting page</title> 
</head> 
<body> 
<p style="text-align: center;"> 
请看网页标题处效果! 
<br /> 
隔10秒后提示消失 
</p> 
<script type="text/javascript"
src="script/jquery-2.0.3.js"> 
</script> 
<script type="text/javascript"> 
 
(function($) { 
$.extend( { 
/** 
* 调用方法: var timerArr = $.blinkTitle.show(); 
* $.blinkTitle.clear(timerArr); 
*/
blinkTitle : { 
show : function() { //有新消息时在title处闪烁提示 
var step = 0, _title = document.title; 
var timer = setInterval(function() { 
step++; 
if (step == 3) { 
step = 1 
} 
 
if (step == 1) { 
document.title = '【 】' + _title 
} 
 
if (step == 2) { 
document.title = '【新消息】' + _title 
} 
 
}, 500); 
return [ timer, _title ]; 
}, 
/** 
* @param timerArr[0], timer标记 
* @param timerArr[1], 初始的title文本内容 
*/
clear : function(timerArr) { //去除闪烁提示,恢复初始title文本 
if (timerArr) { 
clearInterval(timerArr[0]); 
document.title = timerArr[1]; 
} 
 
} 
} 
}); 
})(jQuery); 
jQuery(function($) { 
var timerArr = $.blinkTitle.show(); 
setTimeout(function() { //此处是过一定时间后自动消失 
$.blinkTitle.clear(timerArr); 
}, 10000); 
//若认为操作消失,只需如此调用: $.blinkTitle.clear(timerArr); 
}); 
</script> 
<br /> 
</body> 
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 #Javascript
javascript创建函数的20种方式汇总
Jun 23 #Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 #Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 #Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 #Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 #Javascript
Js+php实现异步拖拽上传文件
Jun 23 #Javascript
You might like
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
Python实现的密码强度检测器示例
2017/08/23 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
python获取整个网页源码的方法
2020/08/03 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
人事局接收函
2015/01/31 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书