Mootools外掛程式-閃爍的標題

標籤：blog   http   ar   io   使用   sp   java   strong   on   

轉自：http://www.cnblogs.com/see7di/archive/2012/10/09/2716024.html

回想起來,我已經好久沒有寫點啥了,尤其是關於Mootools方面的東西,因此今天寫了一個標題閃爍的外掛程式,練練手!

簡單說一下這個外掛程式的功能:該外掛程式可以輕鬆的讓您的<title>標題實現閃爍效果.

注意:我所使用的mootools的core版本是1.4.1,其他的版本我並未測試,如果您有測試的話麻煩短訊息告知我測試結果,謝謝!

我們先來看一下這個外掛程式的執行效果吧!如:

下邊是這個外掛程式的代碼:

?

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455

/**外掛程式:閃爍的標題描述:該外掛程式可以輕鬆讓您的<title>標題實現閃爍效果參數:    tit:(必填)需要在<title>上閃爍的內容    tim:[可選]閃動頻率,多少毫秒閃動一次    delay:[可選]延遲多少毫秒停止閃動注意:    不管是變量還是方法,只要前邊有下劃綫的均為私人用法:    a=new xTitle();    a.Start({tit:‘【短訊息】‘,tim:200,delay:6000});/**/var xTitle=new Class({    Implements:[Options,Events],    Opt:{        tim:280,    //閃動頻率,多少毫秒閃動一次        tit:‘‘,     //要閃動的內容        delay:null, //延遲多少毫秒停止閃動        _mess:‘‘,   //全域標示符,標記現在需要閃動的內容        _title:‘‘,  //原始標題,即<title>標籤內的原始值        _timer1:‘‘, //計時器控制代碼1        _timer2:‘‘  //計時器控制代碼2    },    initialize:function(Opt){//初始化建構函式        this.setOptions(Opt);//設置Options        if(!this.Opt.tit){return false;}    },    _run:function(){        this.Opt._mess=(this.Opt._mess==‘‘) ? this.Opt.tit : ‘‘;        $(document).getElement(‘title‘).set(‘text‘,this.Opt._mess+‘ ‘+this.Opt._title);        this.Opt._timer1=this._run.delay(this.Opt.tim,this);    },    _stop:function(){        clearTimeout(this.Opt._timer1);        clearTimeout(this.Opt._timer2);        $(document).getElement(‘title‘).set(‘text‘,this.Opt._title);        return false;    },    Start:function(o){        if(!o){return false;}         this.Opt._title=$(document).getElement(‘title‘).get(‘text‘);         this.Opt.tim=(o.tim && !isNaN(o.tim)) ? o.tim.toInt() : this.Opt.tim;        this.Opt.delay=(o.delay && !isNaN(o.delay)) ? o.delay.toInt() : this.Opt.delay;        this.Opt.tit=(o.tit) ? o.tit : this.Opt.tit;        if(this.Opt.delay){            this.Opt._timer2=(this._stop.delay(this.Opt.delay,this));        }        this._run();    }});a=new xTitle();a.Start({tit:‘【短訊息】‘,delay:6000});

 

這個外掛程式的使用方法如下:

?

<strong>//這是最完整的用法:</strong><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>www.7di.net</title><meta name="generator" content="editplus" /><meta name="copyright" content="www.7di.net" /><script type="text/javascript" src="@img/mootools-core-1.4.1.js" onerror="alert(‘Error loading ‘+this.src);"></script></head> <body><script language="javascript">a=new xTitle();a.Start({tit:‘【短訊息】‘,tim:300,delay:6000});</script> </body></html> <strong>//不需要自訂閃爍頻率的用法:</strong><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>www.7di.net</title><meta name="generator" content="editplus" /><meta name="copyright" content="www.7di.net" /><script type="text/javascript" src="@img/mootools-core-1.4.1.js" onerror="alert(‘Error loading ‘+this.src);"></script></head> <body><script language="javascript">a=new xTitle();a.Start({tit:‘【短訊息】‘,delay:6000});</script> </body></html> <strong>//也不需要自動停止閃爍的用法:</strong><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>www.7di.net</title><meta name="generator" content="editplus" /><meta name="copyright" content="www.7di.net" /><script type="text/javascript" src="@img/mootools-core-1.4.1.js" onerror="alert(‘Error loading ‘+this.src);"></script></head> <body><script language="javascript">a=new xTitle();a.Start({tit:‘【短訊息】‘});</script> </body></html>

Mootools外掛程式-閃爍的標題