谁帮我解释一下这段javascript代码,
- 提问者网友:山高云阔
- 2021-04-22 21:49
<head>
<style type="text/css">
.spanstyle {
COLOR: red; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</style>
<script>
var x,y
var step=18
var flag=0
var message="★南京有线宽带网欢迎你的光临中困历因中顺顺顺要要有在法!"
message=message.split("")
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}
var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-200
}
function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}
function makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("makesnake()",30)
}
</script>
</head><body bgcolor="#fef4d9" onload="makesnake()">
<script>
<!-- Beginning of JavaScript -
for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
// - End of JavaScript - -->
</script>
</body>
<body bgcolor="#fef4d9" onload="makesnake()">
- 五星知识达人网友:廢物販賣機
- 2021-04-22 22:25
应该是 跟随鼠标的文字特效,,,我帮你注释一下
<head>
<style type="text/css"><!--这是css控制span标签的-->
.spanstyle {
COLOR: red; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</style>
<script>
var x,y//定义两个标量 保存鼠标当前位置
var step=18//step是指步长,也是快慢
var flag=0//定义一个变量来判断当前的状态
var message="★南京有线宽带网欢迎你的光临中困历因中顺顺顺要要有在法!"//将文字赋值给message
message=message.split("")//将message打散成数组,,,message现在成数组了,也就是message[0]=★message[1]="南".....类推
var xpos=new Array()//定义xpos变量为一个数组,数组中每个元素保存message数组中对应元素的x坐标
for (i=0;i<=message.length-1;i++) {//一个循环,,初始化xpos数组,即message中 每个文字的出事x坐标为-50
xpos[i]=-50
}
var ypos=new Array()//这个和xpos一样 保存每个文字的y坐标
for (i=0;i<=message.length-1;i++) {
ypos[i]=-200//和上面的循环一样 初始化,每个文字的y坐标为-200
}
function handlerMM(e){//定义一个函数获取鼠标的坐标
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX//三元运算符。。这里 涉及到浏览器兼容的问题,,你只要知道这是获取鼠标当前的x坐标就行了
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY//同上获取鼠标的y坐标
flag=1//设置标量flag为1
}
function makesnake() {//定义函数
if (flag==1 && document.all) {//如果flag==1而且是ie浏览器(只有ie支持document.all语句)
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step//初始化文字的x坐标,,即,从第二个开始,每个文字距前个文字的距离为step也就是18
ypos[i]=ypos[i-1]//因为每个文字都是平行出现的 所以,,,y坐标全部相等
}
xpos[0]=x+step//设置第一个文字的x坐标为鼠标x坐标
ypos[0]=y//设置第一个文字的y坐标为鼠标的y坐标
for (i=0; i<message.length-1; i++) {//for循环message数组长度那么多次
var thisspan = eval("span"+(i)+".style")//eval语句执行结果为thisspan=spani.style
thisspan.posLeft=xpos[i]//这里是控制span的位置,把数组中对应的值用js来控制span的x坐标位置
thisspan.posTop=ypos[i]//y的
}
}
else if (flag==1 && document.layers) {//如果不是ie浏览器
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step//同上
ypos[i]=ypos[i-1]//同上
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
//都是一样的
}
var timer=setTimeout("makesnake()",30)//设置定时器,,过30秒执行一次makesnake() 函数
}
</script>
</head><body bgcolor="#fef4d9" onload="makesnake()">//页面全部加载完毕时候 执行makesnake()函数
<script>
<!-- Beginning of JavaScript -
//下面是输出相应个数的span标签,每个标签保存一个文字
for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);//设置事件。。也就是鼠标移动时间
}
document.onmousemove = handlerMM;//设置鼠标移动事件,也就是鼠标移动,就执行handlerMM函数
// - End of JavaScript - -->
</script>
</body>
<body bgcolor="#fef4d9" onload="makesnake()">