VirCloud's Blog

给网页标题增加特效

温馨提示：
本文所述内容具有依赖性，可能因软硬条件不同而与预期有所差异，故请以实际为准，仅供参考。

相比一成不变的固定标题，增加一些特效会显得更加生动，特别对于游戏、广告类的网站，增加特效（不仅限于标题）会吸引更多用户点击。

特效一：切换

描述：页面在前台显示正常标题，被切换或放置后台后更换设置好的另一个标题。
效果：

page.switch.gif

实现：

<script>
document.addEventListener('visibilitychange',function(){
if(document.visibilityState=='hidden') {
normal_title=document.title;
document.title='草榴社區';
}
else
document.title=normal_title;
});
</script>

注：<script>...</script> 可以放在 <head>，也可以放在 <body>。

特效二：闪动

描述：类似消息通知，闪动标题。
效果：

title.flash.gif

实现：

<script>
step=0
function flash_title()
{
step++
if (step==3) {step=1}         
if (step==1) {document.title='【VirCloud’s Blog】'}
if (step==2) {document.title='【　　　　        】'}
setTimeout("flash_title()",380);
}
flash_title()
</script>

特效三：跑马灯

描述：滚动标题，从左到右或从右到左，跑马灯效果。
效果一：

title.scroll.gif

实现一：

<script>
var index_count = 0;
var title_string = "VirCloud's Blog  - Learning&Sharing - Virtual Cloud Server, Powered by www.vircloud.net";
var title_length = title_string.length;
var cmon;
var kill_length = 0;
function loopTheScroll()
{
scrollTheTitle();
if(kill_length > title_length)
 {
 clearTimeout(cmon);
 }
kill_length++;
cmon = setTimeout("loopTheScroll();",100)
}
function scrollTheTitle()
{
var doc_title = title_string.substring((title_length - index_count - 1),title_length);
document.title = doc_title;
index_count++;
}
loopTheScroll();
</script>

效果二：

title.scroll.2.gif

实现：

<script language=javascript >
var text=document.title;
var timerID;
function newtext() {
clearTimeout(timerID);
document.title=text.substring(1,text.length)+text.substring(0,1);
text=document.title.substring(0,text.length);
timerID = setTimeout("newtext()", 200);
}
newtext();
</script>

原文链接：《网站标题特效集合》（有删改）
参考链接：《你又在看草x社區啊？！|网站标题特效集合》