📄 10-23.htm

📁 JavaScript特效大全
💻 HTM
字号:
<script language=JavaScript>
var message= new Array()
<!--文字信息【序号】＝“标题|说明|网址”-->
message[0]="QQ|腾讯 QQ|http://www.tencten.com"
message[1]="NBA|NBA官方网站|http://www.nba.com"
message[2]="TOM|TOM资源站|http://www.tom.com"
<!--卷轴的高-->
var scrollerheight=20
<!--标题宽--> 
var titlezonewidth=80
<!--说明宽-->
var copyzonewidth=240
<!--距离窗口顶部的距离--> 
var scrollertop=20
<!--距离窗口左边的距离-->
var scrollerleft=20
<!--卷轴的粗-->
var scrollerborder=2
<!--标题背景色--> 
var titlezonebg="330066"
<!--文字的背景色-->
var copyzonebg="CC0000"
<!--卷轴的背景色-->
var scrollbg="AAAAAA"
<!--目标窗口-->
var targetlink="_blank"
<!--标题的字体属性-->
var font_titleface="宋体"
var font_titlecolor="FFFFFF"
var font_titlesize=2
<!--说明的字体属性-->
var font_copyface="宋体"
var font_copycolor="FFFFFF"
var font_copysize=2
<!--1标题为粗体,0为正常-->
var titlebold=1
<!--1说明为粗体，0为正常-->
var copybold=1
<!--设置 'right', 'left' or 'center' 标题对齐方式-->
var titlealign="left"
<!--设置说明对齐方式-->
var copyalign="left"
<!--停顿时间-->
var standstill=4000
var pre_titlebold
var after_titlebold
var pre_copybold
var after_copybold

var cliptop=0
var clipbottom=0
var clipleft=0
var clipright=titlezonewidth+copyzonewidth

var i_message=0
var mes_joined
var mes_split
var contenttext
var contentbg=""

var step=1
var pause=20

if (titlebold==1) {  <!--如果标题要求加粗，则将对应变量赋值为加粗形式-->
	pre_titlebold="<b>"
	after_titlebold="</b>"
}
else if (titlebold==0) { <!--否则赋值为正常-->
	pre_titlebold=""
	after_titlebold=""
}

if (copybold==1) {    <!--如果说明要求加粗，则将对应变量赋值为加粗形式-->
	pre_copybold="<b>"
	after_copybold="</b>"
}
else if (copybold==0) {<!--否则赋值为正常-->
	pre_copybold=""
	after_copybold=""
}

function initiate() {
		mes_joined=message[i_message]   <!--将多个信息合并为mes_joined-->
		mes_split=mes_joined.split("|") <!--将mes_joined在"|"处分开成子串-->
		<!--以下为设置contenttext的格式-->
		contenttext="<table cellpadding=4 cellspacing=0 border=0>" <!--不加粗-->
		contenttext+="<tr valign='top'>"      <!--显示位置-->
		contenttext+="<td align="+titlealign+" width="+titlezonewidth+" height='"+scrollerheight+"' bgcolor='"+titlezonebg+"'>" <!--定义标题栏的对齐方式，宽度，高度，背景色等-->
		contenttext+="<a href='"+mes_split[2]+"' target='"+targetlink+"'>"    <!--超链接到mes_split的第三个字段-->  
		contenttext+="<font face='"+font_titleface+"' color='"+font_titlecolor+"' size='"+font_titlesize+"'>" <!--设定标题栏的字体、字号、颜色等-->
		contenttext+=pre_titlebold
		contenttext+=mes_split[0]      <!--标题栏即mes_split的第一个字段，加粗显示-->
		contenttext+=after_titlebold
		contenttext+="</font></a></td>"
		contenttext+="<td align="+copyalign+" width="+copyzonewidth+" height='"+scrollerheight+"' bgcolor='"+copyzonebg+"'>"<!--定义说明栏的对齐方式、高度、宽度和背景色等-->
		contenttext+="<font face='"+font_copyface+"' color='"+font_copycolor+"' size='"+font_copysize+"'>"<!--设定说明栏的字体、字号、颜色等-->
		contenttext+=pre_copybold
		contenttext+=mes_split[1]  <!--说明栏即mes_split的第二个字段，不加粗显示-->
		contenttext+=after_copybold
		contenttext+="</font></td></tr>"
		contenttext+="</table>"
		
		var bg_width=titlezonewidth+copyzonewidth+2*scrollerborder  <!--表格的总宽度-->
		var bg_height=scrollerheight+2*scrollerborder               <!--表格的总高度-->           
		
		contentbg="<table width="+bg_width+" height='"+bg_height+"' cellpadding=0 cellspacing=0 border='"+scrollerborder+"'><tr><td bgcolor='"+scrollbg+"'>&nbsp;</td></tr></table>"
	    <!--设置contentbg的格式-->
	if (document.all) { <!--如果是ie浏览器-->
		scrollertext.innerHTML=contenttext   <!--将contenttext赋给scrollertext.innerHTML-->
		scrollerbg.innerHTML=contentbg       <!--将contentbg赋给scrollerbg.innerHTML-->
		document.all.scrollertext.style.posTop=scrollertop+scrollerheight  <!--scrollertext距离窗口顶部的高度为卷轴距离窗口顶部的距离加上卷轴的高度-->
		document.all.scrollertext.style.posLeft=scrollerleft               <!--scrollertext距离窗口左端的距离等于卷轴距离窗口左端的距离-->
		document.all.scrollerbg.style.posTop=scrollertop-scrollerborder    <!--scrollerbg距离窗口顶部的距离为卷轴距离窗口顶部的距离减去卷轴的宽度-->
		document.all.scrollerbg.style.posLeft=scrollerleft-scrollerborder  <!--scrollerbg距离窗口左端的距离等于卷轴距离窗口左端的距离减去卷轴的宽度-->
		document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		scrollin()                   <!--调用scrollin函数-->
	}
	if (document.layers) {<!--如果是netscape浏览器，则进行类似功能的操作-->
		document.scrollertext.document.write(contenttext)
		document.scrollertext.document.close()
		document.scrollerbg.document.write(contentbg)
		document.scrollerbg.document.close()
		document.scrollertext.top=scrollertop+scrollerheight
		document.scrollertext.left=scrollerleft
		document.scrollerbg.top=scrollertop-scrollerborder
		document.scrollerbg.left=scrollerleft-scrollerborder
		document.scrollertext.clip.left=clipleft
        document.scrollertext.clip.right=clipright
        document.scrollertext.clip.top=cliptop
        document.scrollertext.clip.bottom=clipbottom
		scrollin()
	}
}

function scrollin(){     <!--此函数是用于字符串移入的-->
	if (document.all){  <!--如果是ie浏览器-->
		if (document.all.scrollertext.style.posTop>scrollertop) {<!--如果scrollertext的popTop大于卷轴距离顶端的距离，则将clipbottom加1-->
			clipbottom+=step
			document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" 
			document.all.scrollertext.style.posTop-=step   <!--popTop减1-->
			var timer=setTimeout("scrollin()",pause)     <!--延时20ms-->
		}
		else {
			clearTimeout(timer)    <!--否则清除timer延时-->
			var timer=setTimeout("scrollout()",standstill) <!--延时4s-->
		}
	}
	if (document.layers){   <!--如果是netscape浏览器，进行类似功能的操作-->
		if (document.scrollertext.top>scrollertop) {
			clipbottom+=step
			document.scrollertext.clip.left=clipleft
        	document.scrollertext.clip.right=clipright
        	document.scrollertext.clip.top=cliptop
        	document.scrollertext.clip.bottom=clipbottom
			document.scrollertext.top-=step
			var timer=setTimeout("scrollin()",pause)
		}
		else {
			clearTimeout(timer)
			var timer=setTimeout("scrollout()",standstill)
		}
	}
}

function scrollout(){    <!--此函数是用于字符串移出的-->
	if (document.all){   <!--如果是ie浏览器-->
		if (document.all.scrollertext.style.posTop>(scrollertop-scrollerheight)){ <!--如果scrollertext的popTop大于卷轴距离顶部与卷轴高度之差，则将cliptop加1-->
			cliptop+=step
			document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
			document.all.scrollertext.style.posTop-=step  <!--scrollertext的popTop减1-->
			var timer=setTimeout("scrollout()",pause)   <!--延时20ms-->
		}
		else {
			clearTimeout(timer)    <!--否则清除延时-->
			changemessage()     <!--改变显示信息-->
		}
	}
	if (document.layers){<!--如果是netscape浏览器，进行类似的操作-->
		if (document.scrollertext.top>(scrollertop-scrollerheight)) {
			cliptop+=step
			document.scrollertext.clip.left=clipleft
        	document.scrollertext.clip.right=clipright
        	document.scrollertext.clip.top=cliptop
        	document.scrollertext.clip.bottom=clipbottom
			document.scrollertext.top-=step
			var timer=setTimeout("scrollout()",pause)
		}
		else {
			clearTimeout(timer)

			changemessage()
		}
	}
}

function changemessage(){ <!--改变显示信息的函数-->
		i_message++   <!--递加-->
		if (i_message>message.length-1) {i_message=0}  <!--如果超出信息序列的长度范围，则置为0-->
		mes_joined=message[i_message]                <!--合并-->
		mes_split=mes_joined.split("|")      <!--将mes_joined在"|"处分开成子串-->
		cliptop=0                       <!--初始化-->
		clipbottom=0
		<!--以下是contenttext的格式设定，与初始化时的相同-->
		contenttext="<table cellpadding=4 cellspacing=0 border=0>"
		contenttext+="<tr valign='top'>"
		contenttext+="<td align="+titlealign+" width="+titlezonewidth+" height='"+scrollerheight+"' bgcolor='"+titlezonebg+"'>"
		contenttext+="<a href='"+mes_split[2]+"' target='"+targetlink+"'>"
		contenttext+="<font face='"+font_titleface+"' color='"+font_titlecolor+"' size='"+font_titlesize+"'>"
		contenttext+=pre_titlebold
		contenttext+=mes_split[0]
		contenttext+=after_titlebold
		contenttext+="</font></a></td>"
		contenttext+="<td align="+copyalign+" width="+copyzonewidth+" height='"+scrollerheight+"' bgcolor='"+copyzonebg+"'>"
		contenttext+="<font face='"+font_copyface+"' color='"+font_copycolor+"' size='"+font_copysize+"'>"
		contenttext+=pre_copybold
		contenttext+=mes_split[1]
		contenttext+=after_copybold
		contenttext+="</font></td></tr>"
		contenttext+="</table>"
	
	if (document.all) { <!--如果是ie浏览器-->
		scrollertext.innerHTML=contenttext  <!--将contenttext赋给scrollertext.innerHTML-->
		document.all.scrollertext.style.posTop=scrollertop+scrollerheight  <!--scrollertext距离窗口顶部的高度为卷轴距离窗口顶部的距离加上卷轴的高度-->
		document.all.scrollertext.style.posLeft=scrollerleft    <!--scrollertext距离窗口左端的距离等于卷轴距离窗口左端的距离-->
		document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		scrollin()          <!--调用scrollin函数-->
	}
	if (document.layers) {<!--如果是netscape浏览器，进行类似的操作-->
		document.scrollertext.document.write(contenttext)
		document.scrollertext.document.close()
		document.scrollertext.top=scrollertop+scrollerheight
		document.scrollertext.left=scrollerleft
		document.scrollertext.clip.left=clipleft
        document.scrollertext.clip.right=clipright
        document.scrollertext.clip.top=cliptop
        document.scrollertext.clip.bottom=clipbottom
		scrollin()
	}
}

</SCRIPT>

<STYLE>A {
	COLOR: #aa0000
}
A:hover {
	COLOR: #ff0000
}
</STYLE>


<body onload=initiate() bgcolor="#FFFFFF">
<DIV id=scrollerbg style="POSITION: absolute; TOP: -1000px"></DIV>
<DIV id=scrollertext style="POSITION: absolute; TOP: -1000px"></DIV>
</body>



<!--本例实现了交替显示不同链接的功能-->
<!--显示的区域分为标题栏和说明栏，其中标题栏中的文字包含超链接可以到达相应的网站-->
<!--主要是通过scrollin和scrollout两个函数来实现的-->
<!--分别对ie和netscape浏览器编写了代码-->
💿 文件大小 1749 K
👤 上传用户 qw4104
📂 所属分类 JavaScript
🏷️ 相关标签

#JavaScript
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -