📄 文字跟随鼠标.htm

📁 JavaScript实例
💻 HTM
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0069)http://www.hongen.com/pc/homepage/javascript/sample/followshubiao.htm -->
<HTML><HEAD><TITLE>洪恩在线 - Javascript实例</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK 
href="文字跟随鼠标.files/home.css" rel=stylesheet>
<META content=电脑乐园,电脑,乐园,交互教程,交互,教程,教育,javascript,javascript实例,网页制作 
name=keywords><LINK href="文字跟随鼠标.files/homepage.css" rel=stylesheet>
<STYLE>.spanstyle {
	FONT-WEIGHT: bold; FONT-SIZE: 10pt; VISIBILITY: visible; COLOR: black; FONT-FAMILY: Verdana; POSITION: absolute; TOP: -50px
}
</STYLE>

<SCRIPT language=javascript>var x,yvar step=20var flag=0var 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]=-50}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>

<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY style="OVERFLOW-Y: scroll; OVERFLOW-X: hidden; WIDTH: 100%" 
bgColor=#ffffff leftMargin=0 onload=makesnake() marginwidth="0">
<SCRIPT language=Javascript src="文字跟随鼠标.files/head.js"></SCRIPT>

<TABLE height=20 cellSpacing=0 cellPadding=0 width=760 align=center border=0>
  <TBODY>
  <TR bgColor=#cfdfff>
    <TD class=p1 align=left height=20><IMG height=8 
      src="文字跟随鼠标.files/blank.gif" width=12><FONT color=#000000><FONT 
      color=#ff9966>当前位置</FONT>：<A class=under 
      href="http://www.hongen.com/default.htm">洪恩在线</A> -&gt; <A class=under 
      href="http://www.hongen.com/pc/index.htm">电脑乐园</A> -&gt; 
    JavaScript</FONT></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
  <TBODY>
  <TR>
    <TD vAlign=top width=207><IMG height=13 src="文字跟随鼠标.files/bule.gif" 
      width=207></TD>
    <TD width=1 bgColor=#a8a8ab><IMG height=1 
      src="E:\杨勇\Web程序设计课件\Javascript实例\文字跟随鼠标.files\blank(1).gif" width=1></TD>
    <TD align=right width=530 height=22><IMG height=20 
      src="文字跟随鼠标.files/js.gif" width=186></TD>
    <TD width=22><IMG height=1 
      src="E:\杨勇\Web程序设计课件\Javascript实例\文字跟随鼠标.files\blank(1).gif" 
  width=1></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
  <TBODY>
  <TR>
    <TD width=124><IMG height=1 
      src="E:\杨勇\Web程序设计课件\Javascript实例\文字跟随鼠标.files\blank(1).gif" width=1></TD>
    <TD width=636 background=文字跟随鼠标.files/line.gif height=27><IMG height=1 
      src="E:\杨勇\Web程序设计课件\Javascript实例\文字跟随鼠标.files\blank(1).gif" 
  width=1></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
  <TBODY>
  <TR>
    <TD class=p3 align=middle width=711><B>　　　　文 字 跟 随 鼠 标</B></TD>
    <TD class=p2 width=1 bgColor=#a8a8ab><IMG height=1 
      src="E:\杨勇\Web程序设计课件\Javascript实例\文字跟随鼠标.files\blank(1).gif" width=1></TD>
    <TD class=p2 width=48>&nbsp;</TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
  <TBODY>
  <TR>
    <TD vAlign=top align=middle>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD align=middle width=28 bgColor=#5f74bf><IMG height=49 
      src="文字跟随鼠标.files/bule1.gif" width=28></TD>
    <TD align=middle width=37>&nbsp;</TD></TR>
  <TR>
    <TD vAlign=top align=middle>
      <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
        <TBODY>
        <TR align=middle>
          <TD>
            <TABLE cellSpacing=0 cellPadding=0 width=110 border=0>
              <TBODY>
              <TR align=middle bgColor=#5f74bf>
                <TD class=p1 align=right><B><FONT color=#ffffff>效 果 演 
                  示</FONT></B><FONT color=#ffffff>：</FONT></TD>
                <TD class=p1 width=11><IMG height=18 
                  src="文字跟随鼠标.files/bule2.gif" 
        width=11></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
    <TD class=p2 align=left>
      <P>&nbsp;</P>
      <P><B><FONT color=#ff6666><STRONG><FONT face=Verdana>
      <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.captureEvents(Event.MOUSEMOVE);}document.onmousemove = handlerMM;// - End of JavaScript - --></SCRIPT>
      </FONT></STRONG>看看你的鼠标有没有变化？</FONT></B><FONT 
      color=#ff6666><B></B></FONT></P>
      <P>　</P></TD>
    <TD align=middle width=28 bgColor=#5f74bf>&nbsp;</TD>
    <TD align=middle width=37>&nbsp;</TD></TR>
  <TR>
    <TD vAlign=top align=middle>
      <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
        <TBODY>
        <TR>
          <TD height=30>&nbsp;</TD></TR>
        <TR align=middle>
          <TD>
            <TABLE cellSpacing=0 cellPadding=0 width=110 border=0>
              <TBODY>
              <TR align=middle bgColor=#5f74bf>
                <TD class=p1 align=right><B><FONT 
                  color=#ffffff>源代码如下</FONT></B><FONT color=#ffffff>：</FONT></TD>
                <TD class=p1 width=11><IMG height=18 
                  src="文字跟随鼠标.files/bule2.gif" 
        width=11></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
    <TD class=p2 vAlign=top width=457><B><BR><BR></B><SPAN class=p1><FONT 
      color=#6633ff></FONT></SPAN><B><BR></B>
      <FORM>
      <P><SPAN class=p1><FONT 
      color=#6633ff>这段程序放在&lt;head&gt;与&lt;/head&gt;之间</FONT></SPAN></P>
      <P><TEXTAREA onmouseover=this.focus() style="BACKGROUND-COLOR: #d5e9fd" onfocus=this.select() name=textarea2 rows=15 wrap=VIRTUAL cols=50>&lt;style&gt;
.spanstyle {
	position:absolute;
	visibility:visible;
	top:-50px;
	font-size:10pt;
	font-family:Verdana;
      font-weight:bold;
	color:black;
}
&lt;/style&gt;
&lt;script&gt;

var x,y
var step=20
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&lt;=message.length-1;i++) {
	xpos[i]=-50
}

var ypos=new Array()
for (i=0;i&lt;=message.length-1;i++) {
	ypos[i]=-50
}

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 &amp;&amp; document.all) {
 	   	for (i=message.length-1; i&gt;=1; i--) {
   			xpos[i]=xpos[i-1]+step
			ypos[i]=ypos[i-1]
	    	}
		xpos[0]=x+step
		ypos[0]=y
	
		for (i=0; i&lt;message.length-1; i++) {
    			var thisspan = eval("span"+(i)+".style")
    			thisspan.posLeft=xpos[i]
			thisspan.posTop=ypos[i]
    		}
	}
	else if (flag==1 &amp;&amp; document.layers) {
    		for (i=message.length-1; i&gt;=1; i--) {
   				xpos[i]=xpos[i-1]+step
				ypos[i]=ypos[i-1]
    		}
		xpos[0]=x+step
		ypos[0]=y
	
		for (i=0; i&lt;message.length-1; i++) {
    			var thisspan = eval("document.span"+i)
    			thisspan.left=xpos[i]
			thisspan.top=ypos[i]
    		}
	}
	var timer=setTimeout("makesnake()",30)
}

&lt;/script&gt;</TEXTAREA> </P>
      <P><SPAN class=p1><FONT 
      color=#6633ff>这段程序放在&lt;body&gt;与&lt;/body&gt;之间</FONT></SPAN></P>
      <P><TEXTAREA onmouseover=this.focus() style="BACKGROUND-COLOR: #d5e9fd" onfocus=this.select() name=textarea rows=6 wrap=VIRTUAL cols=50>&lt;script language=javascript&gt;
&lt;!-- Beginning of JavaScript -
for (i=0;i&lt;=message.length-1;i++) {
    document.write("&lt;span id='span"+i+"' class='spanstyle'&gt;")
	document.write(message[i])
    document.write("&lt;/span&gt;")
}
if (document.layers){
	document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
// - End of JavaScript - --&gt;
&lt;/script&gt;</TEXTAREA> </P>
      <P><SPAN class=p1><FONT color=#6633ff>这段程序放在&lt;body 
      ****&gt;正文中</FONT></SPAN></P>
      <P><TEXTAREA onmouseover=this.focus() style="BACKGROUND-COLOR: #d5e9fd" onfocus=this.select() name=textarea3 rows=4 wrap=VIRTUAL cols=50>onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll"</TEXTAREA> 
      </P></FORM><B><BR></B></TD>
    <TD align=middle width=28 bgColor=#5f74bf>&nbsp;</TD>
    <TD align=middle width=37>&nbsp;</TD></TR>
  <TR>
    <TD vAlign=bottom align=middle>
      <TABLE cellSpacing=0 cellPadding=0 width=238 border=0>
        <TBODY>
        <TR align=middle>
          <TD>&nbsp; </TD></TR></TBODY></TABLE></TD>
    <TD class=p2 vAlign=top width=457>&nbsp;</TD>
    <TD align=middle width=28 bgColor=#5f74bf><IMG height=49 
      src="文字跟随鼠标.files/bule1.gif" width=28></TD>
    <TD align=middle width=37>&nbsp;</TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
  <TBODY>
  <TR>
    <TD class=p2 align=right width=693><BR><BR><BR></TD>
    <TD class=p2 width=18>&nbsp;</TD>
    <TD class=p2 width=1 bgColor=#a8a8ab><IMG height=1 
      src="E:\杨勇\Web程序设计课件\Javascript实例\文字跟随鼠标.files\blank(1).gif" width=1></TD>
    <TD class=p2 width=48>&nbsp;</TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
  <TBODY>
  <TR bgColor=#5f74bf>
    <TD>&nbsp;</TD></TR></TBODY></TABLE></BODY></HTML>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -