菜鸟学飞

<script language="JavaScript">
var x,y
var step=20
var flag=0
var message="Believe youself!!!! "
message=message.split("")
var xpos=new Array()
var ypos=new Array()
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]
}
}
var timer=setTimeout("makesnake()",30)
}for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}document.onmousemove = handlerMM;
</script> 
由于本人太菜了看了半天也不是很清楚，所以请大大们说明下

解决方案 »

  1.   

    什么看不懂啊？？？
    向你推荐一本书——《JavaScript高级编程》
    写的非常简单，当初学者的教材非常好
      

  2.   


    那就是要获得鼠标的坐标，然后用一个div放些文件。设置div的布局方式是position:absolute; 
    div的left就是鼠标的y值，top应该是x的值。为鼠标添加mousemove事件 即可；
      

  3.   

    <HTML>
    <HEAD>
    <STYLE> 
    .spanstyle {
    position:absolute;
    visibility:visible;
    top:-50px;
    font-size:10pt;
    font-family:Verdana;
    font-weight:bold;
    color:#FF8080
    }
    </STYLE>
    </head>
    <body onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll">
     
    <script language="JavaScript"> 
    var x,y
    var step=20
    var flag=0
    var message="Believe youself!!!! "
    message=message.split("")
    var xpos=new Array()
    var ypos=new Array()
    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]
    }
    }
    var timer=setTimeout("makesnake()",30)
    }
     
    for (i=0;i<=message.length-1;i++) {
    document.write("<span id='span"+i+"' class='spanstyle'>")
    document.write(message[i])
    document.write("</span>")
    }
     
    document.onmousemove = handlerMM;
    </script> 
     
     
    <TITLE>1_home</TITLE>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <LINK HREF="style.css" TYPE="text/css" REL="stylesheet"> 
    </HEAD>
    <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 rightmargin="0" bottommargin="0" background="images/right.jpg" style="background-repeat:repeat;background-position:top center">
    <center>
    <table width="766" height="650"  background="images/index.jpg" style="background-repeat:no-repeat;background-position:top" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td style="padding-left:42px;padding-top:90px ">
    <table width="686" height="473"  border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td colspan="2" width="686" height="76" >
    <TABLE WIDTH=686 BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
    <TD><IMG SRC="images/per.gif" WIDTH=263 HEIGHT=76 ALT=""></TD>
    <TD><a href="index.html"><IMG SRC="images/menu_01.jpg" WIDTH=20 HEIGHT=76 ALT=""></a></TD>
    <TD><a href="index-1.html"><IMG SRC="images/menu_02.jpg" WIDTH=20 HEIGHT=76 ALT=""></a></TD>
    <TD><a href="index-2.html"><IMG SRC="images/menu_03.jpg" WIDTH=20 HEIGHT=76 ALT=""></a></TD>
    <TD><a href="index-3.html"><IMG SRC="images/menu_04.jpg" WIDTH=20 HEIGHT=76 ALT=""></a></TD>
    <TD><a href="index-4.html"><IMG SRC="images/menu_05.jpg" WIDTH=20 HEIGHT=76 ALT=""></a></TD>
    <TD><a href="index-5.html"><IMG SRC="images/menu_06.jpg" WIDTH=20 HEIGHT=76 ALT=""></a></TD>
    <TD><IMG SRC="images/per-1.gif" WIDTH=303 HEIGHT=76 ALT=""></TD>
    </TR>
    </TABLE>
     
    </td>
    </tr>
    <tr>
    <td width="267" height="359" align="right"><a href="#"><img src="images/pic.jpg"></a></td>
    <td width="419" height="359" background="images/back.jpg">
    <table width="354" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td height="118">
    <img src="images/txt-1.gif" style="margin-top:24px"><br>
    <div style=" padding-left:18px;padding-top:7px">
    <strong class="style-b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus.</strong><br>
    Aenean nonummy hendrerit mauris. Phasellus porta. <a href="#">Fusce suscipit varius mi.</a> Cum sociis natoque penatibus et magnis dis parturient 
    <div style=" padding-right:18px;padding-top:6px" align="right"><strong><a href="#">more info</a></strong></div>
    </div>
    </td>
    </tr>
    <tr><td><img src="images/line-1.gif" style="margin-left:8px "></td></tr>
    <tr>
    <td height="120">
    <img src="images/txt-2.gif" style="margin-top:14px"><br>
    <div style=" padding-left:18px;padding-top:9px">
    <div style=" width:328px;height:62px;background-color:#EEEEEE">
    <img src="images/pic-1.jpg" align="left" style="margin-right:8px">
    <div style=" padding-top:7px">
    <a href="#" style="color:#7B7B7B"><strong>Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit</strong></a><br>Natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </div>
    </div>
    <div style=" padding-right:10px;padding-top:1px" align="right"><strong><a href="#" style="color:#7B7B7B">more news</a></strong></div>
    </div>
    </td>
    </tr>
    <tr><td><img src="images/line-1.gif" style="margin-left:8px "></td></tr>
    <tr>
    <td height="100%">
    <img src="images/txt-3.gif" style="margin-top:15px"><br>
    <div style=" padding-left:18px;padding-top:8px">
    <img src="images/pic-2.jpg"><img src="images/pic-3.jpg" style="margin-left:4px;margin-right:4px"><img src="images/pic-4.jpg">
    <div style=" padding-left:17px" class="style-r"><strong>&bull;</strong> <a href="#" style="color:#A0410D">gallery # 1</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>&bull;</strong> <a href="#" style="color:#A0410D">gallery # 2</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>&bull;</strong> <a href="#" style="color:#A0410D">gallery # 3</a></div>
    </div>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td colspan="2" width="686" height="38" background="images/end.gif" style="background-repeat:no-repeat;background-position:top">
    <div style=" padding-top:19px;padding-right:4px" align="right"><a href="index-6.html" style="color:#FFFFFF;text-decoration:none">&copy; 1999-2005 personal page.  All Rights Reserved.</a></div>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </center>
    </BODY>
    </HTML>