回想起來,我已經好久沒有寫點啥了,尤其是關於Mootools方面的東西,因此今天寫了一個標題閃爍的外掛程式,練練手!
簡單說一下這個外掛程式的功能:該外掛程式可以輕鬆的讓您的<title>標題實現閃爍效果.
注意:我所使用的mootools的core版本是1.4.1,其他的版本我並未測試,如果您有測試的話麻煩短訊息告知我測試結果,謝謝!
我們先來看一下這個外掛程式的執行效果吧!如:
下邊是這個外掛程式的代碼:
/**外掛程式:閃爍的標題描述:該外掛程式可以輕鬆讓您的<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);//設置Optionsif(!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});
這個外掛程式的使用方法如下:
//這是最完整的用法:<!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>//不需要自訂閃爍頻率的用法:<!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>//也不需要自動停止閃爍的用法:<!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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
