开发者社区> 航空母舰> 正文

利用jquery制作闪动标题

简介:
+关注继续查看

jQuery获取head的title

Java代码  收藏代码
  1. $(document).ready(function(){  
  2.     alert($("title").html());  
  3.     $(document)[0].title='dd';  
  4. });  
Java代码  收藏代码
  1. jQuery(function($) {  
  2.     setInterval(function(){  
  3.         $.get("Untitled-2.html", function(data){  
  4.             if(data == 1){//有新消息  
  5.                 var timerArr = $.blinkTitle.show();  
  6.                 setInterval(function() {        //此处是过一定时间后自动消失  
  7.                     $.blinkTitle.clear(timerArr);  
  8.                 }, 4000)  
  9.             }else{  
  10.                 $.blinkTitle.clear(timerArr);  
  11.             }  
  12.         });  
  13.     },4000);  
  14.     //若认为操作消失,只需如此调用:    $.blinkTitle.clear(timerArr);  
  15. });  

  送达方式发

Java代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>新消息闪烁提示Demo</title>  
  6. </head>  
  7.    
  8. <body>  
  9.     <p style="text-align:center;">请看网页标题处效果!  
  10.         <br/>隔10秒后提示消失  
  11.     </p>  
  12.     <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>  
  13.     <script type="text/javascript">  
  14.     ;(function($) {  
  15.       
  16.         $.extend({  
  17.             /** 
  18.              * 调用方法: var timerArr = $.blinkTitle.show(); 
  19.              *          $.blinkTitle.clear(timerArr); 
  20.              */  
  21.             blinkTitle : {  
  22.                 show : function() { //有新消息时在title处闪烁提示  
  23.                     var step=0, _title = document.title;  
  24.           
  25.                     var timer = setInterval(function() {  
  26.                         step++;  
  27.                         if (step==3) {step=1};  
  28.                         if (step==1) {document.title='【   】'+_title};  
  29.                         if (step==2) {document.title='【新消息】'+_title};  
  30.                     }, 500);  
  31.                       
  32.                     return [timer, _title];  
  33.                 },  
  34.                   
  35.                 /** 
  36.                  * @param timerArr[0], timer标记 
  37.                  * @param timerArr[1], 初始的title文本内容 
  38.                  */  
  39.                 clear : function(timerArr) {    //去除闪烁提示,恢复初始title文本  
  40.                     if(timerArr) {  
  41.                         clearInterval(timerArr[0]);   
  42.                         document.title = timerArr[1];  
  43.                     };  
  44.                 }  
  45.             }  
  46.         });  
  47.     })(jQuery);  
  48.           
  49.     jQuery(function($) {  
  50.         var timerArr = $.blinkTitle.show();  
  51.           
  52.         setTimeout(function() {     //此处是过一定时间后自动消失  
  53.             $.blinkTitle.clear(timerArr);  
  54.         }, 10000);  
  55.           
  56.         //若认为操作消失,只需如此调用:   $.blinkTitle.clear(timerArr);  
  57.     });  
  58.     </script>  
  59. </body>  
  60. </html>  

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】,祝大家情人节快乐。
66 0
JQuery 网页选项卡制作
网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情。今天就来分享一个网页选项卡的制作小技巧。 引入所需库 选项卡原理 业务核心 完整小例子 引入所需库 这个知识点很基础,但是为了照顾fresh man ,我还是写一下吧。
1215 0
+关注
航空母舰
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载