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 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
实例讲解v-if和v-show的区别
Jan 31 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 定界符 使用技巧
2009/06/14 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
js null undefined 空区别说明
2010/06/13 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python自定义线程池实现方法分析
2018/02/07 Python
python按照多个条件排序的方法
2019/02/08 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
python返回数组的索引实例
2019/11/28 Python
Django之form组件自动校验数据实现
2020/01/14 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
挑战杯创业计划书的写作指南
2014/01/07 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
优秀党员申报材料
2014/12/18 职场文书