jQuery實(shí)現(xiàn)新消息在網(wǎng)頁標(biāo)題閃爍提示
更新時(shí)間：2015年06月23日 11:25:12 投稿：hebedich
這篇文章主要介紹了jQuery實(shí)現(xiàn)新消息在網(wǎng)頁標(biāo)題閃爍提示的相關(guān)資料,需要的朋友可以參考下
可能有一些站長會(huì)注意到這樣的效果，就是我們在一些SNS社交、社區(qū)論壇瀏覽時(shí)，經(jīng)常會(huì)看到收到的新消息會(huì)閃爍標(biāo)題提示，那么這樣的效果我們能不能運(yùn)用在 自己的網(wǎng)站呢，新消息在網(wǎng)頁標(biāo)題閃爍顯示的效果如何實(shí)現(xiàn)？小編有幸在某牛人技術(shù)博客看到這樣的代碼，基于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;">
請看網(wǎng)頁標(biāo)題處效果！
<br />
隔10秒后提示消失
</p>
<script type="text/javascript"
src="script/jquery-2.0.3.js">
</script>
<script type="text/javascript">
(function($) {
$.extend( {
/**
* 調(diào)用方法： var timerArr = $.blinkTitle.show();
* $.blinkTitle.clear(timerArr);
*/
blinkTitle : {
show : function() { //有新消息時(shí)在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標(biāo)記
* @param timerArr[1], 初始的title文本內(nèi)容
*/
clear : function(timerArr) { //去除閃爍提示，恢復(fù)初始title文本
if (timerArr) {
clearInterval(timerArr[0]);
document.title = timerArr[1];
}
}
}
});
})(jQuery);
jQuery(function($) {
var timerArr = $.blinkTitle.show();
setTimeout(function() { //此處是過一定時(shí)間后自動(dòng)消失
$.blinkTitle.clear(timerArr);
}, 10000);
//若認(rèn)為操作消失，只需如此調(diào)用： $.blinkTitle.clear(timerArr);
});
</script>
<br />
</body>
</html>
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:
- javascript 文本框水印/占位符(watermark/placeholder)實(shí)現(xiàn)方法
- Javascript 網(wǎng)頁水印(非圖片水印)實(shí)現(xiàn)代碼
- Jquery插件分享之氣泡形提示控件grumble.js
- 易操作的jQuery表單提示插件
- jquery實(shí)現(xiàn)郵箱自動(dòng)填充提示功能
- jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框(可智能定位)
- jquery 實(shí)現(xiàn)輸入郵箱時(shí)自動(dòng)補(bǔ)全下拉提示功能
- jquery實(shí)現(xiàn)美觀的導(dǎo)航菜單鼠標(biāo)提示特效代碼
- jquery-tips懸浮提示插件分享
- jQuery實(shí)現(xiàn)提示密碼強(qiáng)度的代碼
- jQuery實(shí)現(xiàn)為控件添加水印文字效果(附源碼)
相關(guān)文章
jquery追加元素的所有方法全面深入實(shí)例講解（append、prepend、after、before、wrap等等）
幾乎所有網(wǎng)站的開發(fā)都離不開jQuery，jQuery可以很方便的實(shí)現(xiàn)網(wǎng)頁中的一些效果，也很輕松的對網(wǎng)頁中的一些DIV元素進(jìn)行添加，修改或刪除的操作。由于不同位置追加元素的代碼不一樣，本文實(shí)例講解如何對網(wǎng)頁中某個(gè)指定的DIV進(jìn)行元素的追加操作。2023-03-03
這篇文章主要介紹了jQuery制作的超酷平面式時(shí)鐘效果，把日期和時(shí)間通過橫向刻度條展現(xiàn)，推薦給大家，有需要的小伙伴可以參考下2015-08-08
圖片放大在某些例如商品細(xì)節(jié)放大圖比較常見，本文寫了一個(gè)圖片放大的示例適合日常應(yīng)付，有需求的朋友可以參考下2013-08-08
這篇文章主要介紹了jQuery實(shí)現(xiàn)列表的增加和刪除功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-06-06
JQuery報(bào)錯(cuò)Uncaught TypeError: Illegal invocation的處理方法
這篇文章主要介紹了JQuery報(bào)錯(cuò)"Uncaught TypeError: Illegal invocation"的處理方法,需要的朋友可以參考下2015-03-03
jquery 最簡單易用的表單驗(yàn)證插件，不論是從應(yīng)用還是學(xué)習(xí)插件的寫法都是值得一看的。2010-02-02
這篇文章主要介紹了jQuery獲取字符串中出現(xiàn)最多的數(shù) 的相關(guān)資料,需要的朋友可以參考下2016-02-02
jQuery中Datatables增加跳轉(zhuǎn)到指定頁功能
本文給大家分享jquery中datatable增加跳轉(zhuǎn)到指定頁面功能以及jquery datatable中加入雙擊跳轉(zhuǎn)功能的實(shí)例代碼，需要的朋友參考下2017-02-02
最近再做價(jià)值中國微博，從用戶體驗(yàn)的角度，將很多常用的window.alert或者window.confirm之類比較生硬死板冷不丁的提示改為彈出層的方式實(shí)現(xiàn)。2010-10-10
Jquery實(shí)現(xiàn)帶動(dòng)畫效果的經(jīng)典二級(jí)導(dǎo)航菜單
導(dǎo)航菜單在網(wǎng)頁中呈現(xiàn)的頻率還是比較多的，因?yàn)樾Ч喈?dāng)不錯(cuò),接下來為大家介紹下使用jquery實(shí)現(xiàn)經(jīng)典二級(jí)導(dǎo)航菜單，各位童鞋們快來圍觀哦2013-03-03