几种好玩的标题栏javascript动态效果

2018年3月28日 0条评论

标题栏定时显示不同信息代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<STYLE type=text/css>
<!--
body {
	SCROLLBAR-ARROW-COLOR: #698cc3; 
	SCROLLBAR-BASE-COLOR: #f8f8f8;	
	background:url(../images/bg.gif);
	}
-->
</STYLE>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
function settitle() {
var a = "现在是第10秒 ";
var b = "现在是第20秒";
var c = "现在是第30秒";
var d = "现在是第40秒 ";
var e = "现在是第50秒";
var f = "现在是第60秒";
 var t = new Date();
 s = t.getSeconds();
 if (s == 10) {
  document.title = a;}
 else if (s == 20) {
 document.title = b;}
 else if (s == 30) {
 document.title = c;}
 else if (s == 40) {
 document.title = d;}
 else if (s == 50) {
 document.title = e;}
 else if (s == 00) {
 document.title = f;}
 setTimeout("settitle()", 1000);
 }
 settitle()
</script>
</body>
</html>

标题栏跑马灯效果：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<STYLE type=text/css>
<!--
body {
	SCROLLBAR-ARROW-COLOR: #698cc3; 
	SCROLLBAR-BASE-COLOR: #f8f8f8;	
	background:url(../images/bg.gif);
	}
-->
</STYLE>
</head>
<body>
<script language="JavaScript1.2"> 
var message="样吧——http://www.css8.cn网页样件交流会所" 
var message=message+" " 
i="0" 
var temptitle="" 
var speed="150" 
function titler(){
if (!document.all&&!document.getElementById)
return
document.title=temptitle+message.charAt(i) 
temptitle=temptitle+message.charAt(i) 
i++ 
if(i==message.length) 
{
i="0" 
temptitle="" 
}
setTimeout("titler()",speed) 
}
window.onload=titler
</script>
</body>
</html>

抽象动态标题栏霓虹灯效果：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>抽象动态标题栏－霓虹灯</title>
<STYLE type=text/css>
<!--
body {
	SCROLLBAR-ARROW-COLOR: #698cc3; 
	SCROLLBAR-BASE-COLOR: #f8f8f8;	
	background:url(../images/bg.gif);
	}
-->
</STYLE>
</head>
<body>
<SCRIPT language=javascript> 
<!--------------------------------------------------------------->
<!--			 功能说明：抽象动态标题栏－霓虹灯  	 	 	   -->
<!--------------------------------------------------------------->
title_new="_霓虹灯_^_^_欢迎您_" //中间的标题 
step=0 
function flash_title() { 
    step++ 
    if (step==7) {step=1} 
    if (step==1) {document.title='◆◇◇◇◇◇'+title_new+'◇◇◇◇◇◆'} 
    if (step==2) {document.title='◇◆◇◇◇◇'+title_new+'◇◇◇◇◆◇'} 
    if (step==3) {document.title='◇◇◆◇◇◇'+title_new+'◇◇◇◆◇◇'} 
    if (step==4) {document.title='◇◇◇◆◇◇'+title_new+'◇◇◆◇◇◇'} 
    if (step==5) {document.title='◇◇◇◇◆◇'+title_new+'◇◆◇◇◇◇'} 
    if (step==6) {document.title='◇◇◇◇◇◆'+title_new+'◆◇◇◇◇◇'} 
    setTimeout("flash_title()",180); 
} 
flash_title() 
<!--------------------------------------------------------------->
</SCRIPT>
</body>
</html>

抽象动态标题栏-星星闪烁效果：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>抽象动态标题栏－星星闪烁</title>
<STYLE type=text/css>
<!--
body {
	SCROLLBAR-ARROW-COLOR: #698cc3; 
	SCROLLBAR-BASE-COLOR: #f8f8f8;	
	background:url(../images/bg.gif);
	}
-->
</STYLE>
</head>
<body>
<script language="JavaScript">
<!--------------------------------------------------------------->
<!--			功能说明：抽象动态标题栏－星星闪烁 	 		   -->
<!--------------------------------------------------------------->
step=0
function flash_title(){
    step++
    if (step==4) {step=1}
    if (step==1) {document.title='-☆★★--星星闪烁--★★☆-'}
    if (step==2) {document.title='-★☆★--星星闪烁--★☆★-'}
    if (step==3) {document.title='-★★☆--星星闪烁--☆★★-'}	
    setTimeout("flash_title()",300);
}
flash_title()
<!--------------------------------------------------------------->
</script>
</body>
</html>