Transferred from: http://www.cnblogs.com/see7di/archive/2012/10/09/2716024.html
In retrospect, I have not written something for a long time, especially about the mootools aspect of things, so today wrote a title flashing plug-in, practicing practiced hand!
Simply say the plugin's function: The plugin can easily make your <title> title blink.
Note: I am using the core version of the MooTools is 1.4.1, the other version I did not test, if you have a test, please tell me the results of the short message, thank you!
Let's take a look at the effect of this plugin! such as:
Below is the code for this plugin:
?
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});
|
Here's how to use this plugin:
?
<strong>
//这是最完整的用法:</strong>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
"http://www.w3.org/1999/xhtml"
> <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>
<body>
<script language=
"javascript"
>
a=
new xTitle();
a.Start({tit:
‘【短消息】‘
,tim:300,delay:6000});
</script>
</body>
<strong>
//不需要自定义闪烁频率的用法:</strong>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
"http://www.w3.org/1999/xhtml"
> <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>
<body>
<script language=
"javascript"
>
a=
new xTitle();
a.Start({tit:
‘【短消息】‘
,delay:6000});
</script>
</body>
<strong>
//也不需要自动停止闪烁的用法:</strong>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
"http://www.w3.org/1999/xhtml"
> <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>
<body>
<script language=
"javascript"
>
a=
new xTitle();
a.Start({tit:
‘【短消息】‘
});
</script>
</body>
|
MooTools Plugin-Flashing title