<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字跟随鼠标动</title>
<style>
.spanstyle
{
position:absolute;
visibility:visible;
top:-50px;
font-size:13pt;
font-family:Verdana;
font-weight:bold;
color:black;
}
</style>
<script language="javascript">
var x,y
var step=30
var flag=0
var message="我是飘动的文字用JAVASCRIPT实现的"
message=message.split("")
var xpos=new Array( ) <!--这句是什么意啊?把XPOS定义为数组吗?-->
for (i=0;i<=message.length-1;i++)
{ <!--这是把数组中的每个元素定义为-50吗?-->
xpos[i]=-50 <!--这个-50是坐标吗,坐标不是应该由鼠标赋予的吗,这里是不是随便写个数就好了,只要是同类型的就行,还是这个-50有什么特定的意义啊?-->
}
var ypos=new Array( )
for (i=0;i<=message.length-1;i++)
{
ypos[i]=-50
}
function handlerMM(e) <!--这个e是什么类型的啊还有下面的2条语句应该是获取鼠标的坐标用的吧,希望大家能仔细讲解下啊,-->
{
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+sgep
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 ti=setTimeout("makesnake()",30)
}
</script>
</head>
<body onLoad="makesnake()" >
<script language="javascript">
<!-- 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.captureEverts(Event.ONMOUSEMOVE);
}
document.onmousemove=handlerMM;
//-end of JavaScript- -->
</script>
</body>
</html><!--而且这个代码好象获取Y方向的坐标,又该怎么改啊,谢谢-->
<body onLoad="makesnake()" >
老大style="width:100%;overflow-x:hidden;overflow-y:scroll
x坐标隐藏 y坐标显示 去掉这句就行了
脚本说明:
第一步:把如下代码加入<head>区域中
<style type="text/css">
.spanstyle {
COLOR: #ffd8ff; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</style>
<script>
var x,y
var step=18
var flag=0
// Your snappy message. Important: the space at the end of the sentence!!!
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>
第二步:把如下代码加入<body>区域中
<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()">
var xpos=new Array( ) <!--这句是什么意啊?把XPOS定义为数组吗?-->
定为数组
======================================================================
for (i=0;i<=message.length-1;i++)
{ <!--这是把数组中的每个元素定义为-50吗?-->
xpos[i]=-50 <!--这个-50是坐标吗,坐标不是应该由鼠标赋予的吗,这里是不是随便写个数就好了,只要是同类型的就行,还是这个-50有什么特定的意义啊?-->
}
用循环的,把刚才那个数组赋值,把每个数都赋为-50
-50下面的作用是文字出现时的Y坐标
======================================================================
function handlerMM(e) <!--这个e是什么类型的啊还有下面的2条语句应该是获取鼠标的坐标用的吧,希望大家能仔细讲解下啊,-->
E就是触发事件的对象,你可以理角成整个浏览器
======================================================================
{
if(flag==1&&document.all) <!--这个语句什么意识啊?-->
如果是IE
======================================================================
var thisspan=eval("span"+(i)+".style") <!--这个也不懂啊-->
循环出每个文字所在的标签内的样式
thisspan.posLeft=xpos[i] <!--详解-->
把这些文字所在的标签设定它的左定位,也就是坐标
======================================================================
}
if(document.layers) <!--头都大了-->
和上面的if(document.all)作用一样,可理角成判断是不是IE,或浏览器有没有效
虽然告诉你这些的意思,但深入理理它也没什么用,拿来用就好了。