给网页标题增加特效

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

特效一:切换

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

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社區啊?!|网站标题特效集合


ArmxMod for Typecho
个性化、自适应、功能强大的响应式主题

推广

 继续浏览关于 教程网页特效 的文章

 本文最后更新于 2017/11/27 12:41:28,可能因经年累月而与现状有所差异

 引用转载请注明:VirCloud's Blog > 运维 > 给网页标题增加特效