使用Javascrip制作打字效果
点击次数：21 次 发布日期：2008-11-26 23:00:56 作者：源代码网
|
源代码网推荐
使用JavaScript脚本，我们可以制作出类似于屏幕的打字效果。
请看制作方法：
在<body>中插入JavaScript代码：
<script language="JavaScript1.2">
<!--
//设置滚动的内容
var line=new Array()
line[1]="This is an awsome script"
line[2]="It brings up the text you want..."
line[3]="One letter at a time"
line[4]="You can add and subtract lines as you like."
line[5]="It"s very cool and easy to use"
//设置字体大小
var ts_fontsize="16px"
//--Don"t edit below this line 下列代码不要编辑
var longestmessage=1
for (i=2;i<line.length;i++){
if (line[i].length>line[longestmessage].length)
longestmessage=i
}
//Auto set scroller width
var tscroller_width=line[longestmessage].length
lines=line.length-1 //--Number of lines
//if IE 4+ or NS6
if (document.all||document.getElementById){
document.write("<form name="Bannerform">")
document.write("<input type="text" name="Banner" size=""+tscroller_width+""")
document.write(" style="background-color: "+document.bgColor+"; color: "+document.body.text+"; font-family: verdana; font-size: "+ts_fontsize+"; font-weight:bold; border: medium none" onfocus="blur()">")
document.write("</form>")
}
temp=""
nextchar=-1;
nextline=1;
cursor="\"
function animate(){
if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){
nextline++;
nextchar=-1;
document.Bannerform.Banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){
nextline=1;
nextchar=-1;
document.Bannerform.Banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else{
nextstep()}}
function nextstep(){
if (cursor=="\"){
cursor="|"}
else if (cursor=="|"){
cursor="/"}
else if (cursor=="/"){
cursor="-"}
else if (cursor=="-"){
cursor="\"}
nextchar++;
temp+=line[nextline].charAt(nextchar);
document.Bannerform.Banner.value=temp+cursor
setTimeout("animate()",25)}
//if IE 4+ or NS6
if (document.all||document.getElementById)
window.onload=animate
// -->
</script>
源代码网供稿. |
