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 相关文章推荐
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
js实现登录验证码
Dec 22 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
javascript this指向相关问题及改变方法
Nov 19 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 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
php数组删除元素示例
2014/03/21 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
简单的分页代码js实现
2016/05/17 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
Python解析最简单的验证码
2016/01/07 Python
python字典的常用操作方法小结
2016/05/16 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
pygame实现弹球游戏
2020/04/14 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
后勤个人工作总结
2015/02/28 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
Django一小时写出账号密码管理系统
2021/04/29 Python
PHP获取学生成绩的方法
2021/11/17 PHP
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android