📄 9.6.htm
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>文字效果</title>
</head>
<body bgcolor="#ffc0c0" onload=setValues()>
<h1>页面飘动的文字</h1><hr>
<script language="JavaScript">
<!--
var your_message="天行健，君子以自强不息。" //显示信息的内容
var textfont="隶书" //显示字体
var textsize=20 //显示字号
var textcolor="8080cc" //颜色设定
var textboldness=7 //字体粗细
var tempo=200 //延时长短
var stepx=20 //移动的步长，分水平和垂直方向的
var stepy=15
var msg=new Array()
var msg=your_message //将要显示的内容赋给msg
var message=msg.split("") //将msg在空格处拆分
var numberofletters=msg.length-1 //字符的个数
var x,y
var marginbottom //浏览器的底部
var marginleft=0 //浏览器的左边界
var margintop=0 //浏览器的顶部
var marginright //浏览器的右边界
textboldness=textboldness*100 //字体粗细设定
var timer //计时
var xpos=new Array() //横、纵坐标
var ypos=new Array()
var spancontent=new Array() //要显示的内容，包括格式的设定
for (i=0; i<=numberofletters;i++) { //初始化，每个字符的x、y坐标均为0
xpos[i]=0
ypos[i]=0
}
for (i=0;i<=numberofletters;i++) { //按照规定的格式显示字符
spancontent[i]="<span style='position:relative;font-family:"+textfont+";font-size:"+textsize+"pt;color:"+textcolor+";font-weight:"+textboldness+"'>"+message[i]+"</span>"
}
function setValues() { //设定延时为2s
var firsttimer= setTimeout("setValues2()",2000)
}
function setValues2() {
if (document.all) { //如果是IE浏览器
marginbottom = document.body.clientHeight-5 //设定显示的底边和右边
marginright = document.body.clientWidth-5
for (i=0;i<=numberofletters;i++) {
var thisspan = eval("document.all.span"+i)
thisspan.innerHTML=spancontent[i] //将spancontent的值返回给thisspan
var thisspan = eval("document.all.span"+(i)+".style")
thisspan.posLeft=0 //将位置确定为左上角
thisspan.postop=0
}
moveball() //文字开始移动
}
}
function randommaker(range) { //产生随机数
rand=Math.floor(range*Math.random())
return rand
}
function moveball() { //使文字移动的函数
if (document.all) { //如果是IE浏览器
checkposition() //调用checkposition函数，检查位置并给予必要的调整
makesnake() //调用makesnake函数
document.all.span0.style.posTop+=stepy //改变垂直方向上的位置值
timer=setTimeout("moveball()",tempo) //延时40ms
}
}
function makesnake() {
for (i=numberofletters; i>=1; i--) { //循环，使得第i个字符占据第i－1个字符的位置
xpos[i]=xpos[i-1]
ypos[i]=ypos[i-1]
}
if (document.all) { //如果是IE浏览器
xpos[0]=document.all.span0.style.posLeft+stepx //确定第1个字符的位置
ypos[0]=document.all.span0.style.posTop+stepy
for (i=0;i<=numberofletters;i++) { //对于每个字符
var thisspan=eval("document.all.span"+(i)+".style")
thisspan.posLeft=xpos[i] //将更新后的x、y坐标赋给thisspan
thisspan.posTop=ypos[i]
}
}
}
function checkposition() {
if (document.all) { //如果是IE浏览器
if (document.all.span0.style.posLeft>marginright) { //如果位置超出右边界
stepx=(stepx+randommaker(2))*-1 //更新横坐标步长值
document.all.span0.style.posLeft-=1 //posLeft减1
}
if (document.all.span0.style.posLeft<marginleft) { //如果位置超出左边界
stepx=(stepx+randommaker(2))*-1 //更新横坐标步长值
document.all.span0.style.posLeft+=1 //posLeft加1
}
if (document.all.span0.style.posTop>marginbottom) { //如果位置超过底部
stepy=(stepy+randommaker(2))*-1 //更新纵坐标步长值
document.all.span0.style.posTop-=1 //posTop减1
}
if (document.all.span0.style.posTop<margintop) { //如果位置超出顶部
stepy=(stepy+randommaker(2))*-1 //更新纵坐标步长值
document.all.span0.style.posTop+=1 //posTop加1
}
}
}
for (i=0;i<=numberofletters;i++) { //显示上面定义的字符串
document.write("<span id='span"+i+"' style='position:absolute'></span>")
document.close() //关闭显示
}
//-->
</script>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -