利用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>  
相关文章
|
JavaScript
jquery 实现 table 和 标题 的联动显示
jquery 实现 table 和 标题 的联动显示
132 0
jquery 实现 table 和 标题 的联动显示
|
前端开发 Java
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】,祝大家情人节快乐。
178 0
|
Web App开发 JavaScript 容器
JQuery自动上滑标题效果
效果图 效果图 设计思路: 用ul显示内部上滑标题,并在其外部添加一个div作为容器,然后使用JQuery的动画效果,使ul的top属性不断改变来实现上滑的效果。
832 0
|
前端开发 JavaScript 开发者
使用 CSS & jQuery 制作一款漂亮的多彩时钟
  大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现。而今天这里要分享的这款漂亮的多彩时钟效果大家不一定见过,赶紧来看看。
821 0
|
JavaScript 前端开发 数据安全/隐私保护
对于 Web 开发很有用的 jQuery 效果制作教程
  如果你的项目中需要响应式滑块,炫丽的图片呈现,对话框提示,轻巧动画等效果,jQuery 是完美的解决方案。凭借这个快速,易用的 JavaScript 库,可以轻松处理语言之间的交互,它给人最快速的 Web 开发能力。
1330 0
|
JavaScript 前端开发 容器
jquery动画 -- 6.制作带鼠标和键盘引导功能的图片浏览器
  今天我们要介绍的jquery动画效果是,当移动鼠标或者按键盘的左右键时,图片走廊中的图片向相应方向转动。   先来看张效果图,教程最后附有demo,大家可以下载。   首先要做的工作是创建html文本。
1024 0
|
JavaScript 前端开发 数据格式
jquery动画 -- 8.走马灯效果的制作
  今天要介绍的是走马灯效果的制作,效果图如下,页面中‘Recent Posts’就是走马灯部分。      现在我们介绍如何制作走马灯,首先定义html页面结构。      ...
1475 0
|
前端开发 JavaScript
|
JavaScript 前端开发
jquery插件制作 -- 2.图片走廊:gallery
  本文主要内容是讲解图片走廊-gallery的实现。   首先创建jquery.gallery.js的插件文件,构建程序骨架。 (function ($) {   $.fn.gallery = function () {     return this.
1022 0
|
前端开发 JavaScript
jquery插件制作 -- 3.表单验证
  今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是,当表单提交的时候检查必填项是否正确填写,同时根据需要验证输入信息是否符合规范。   先下页面代码: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
1078 0