📄 shu15.htm

📁 javascript各种效果的实例及源代码
💻 HTM
字号:
<html>
<head>
<title>非图片鼠标跟踪器</title>
<style type="text/css">
<!--
body {  font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px}
A { COLOR: black; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: none }
 A:hover { COLOR: red; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: underline }
a:active     { font: 9pt "宋体"; cursor: hand; color: #FF0033 }
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<STYLE TYPE="text/css">
<!--

BODY{
overflow:scroll;
overflow-x:hidden;
}

.s1
{
  position  : absolute;
  font-size : 12pt;
  color     : blue;
  visibility: hidden;
}

.s2
{
  position  : absolute;
  font-size : 20pt;
  color     : red;
	visibility : hidden;
}

.s3
{
  position  : absolute;
  font-size : 16pt;
  color     : gold;
	visibility : hidden;
}

.s4
{
  position  : absolute;
  font-size : 14pt;
  color     : lime;
	visibility : hidden;
}
-->
</STYLE>
</head>

<body bgcolor="#fef4d9">
<DIV ID="div1" CLASS="s1">*</DIV>
<DIV ID="div2" CLASS="s2">*</DIV>
<DIV ID="div3" CLASS="s3">*</DIV>
<DIV ID="div4" CLASS="s4">*</DIV>


<script language="javascript" type="text/javascript" class="s5">

var nav = (document.layers);
var tmr = null;
var spd = 50;
var x = 0;
var x_offset = 5;
var y = 0;
var y_offset = 15;

if(nav) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse; 

function get_mouse(e)
{    
  x = (nav) ? e.pageX : event.clientX+document.body.scrollLeft;
  y = (nav) ? e.pageY : event.clientY+document.body.scrollTop;
  x += x_offset;
  y += y_offset;
  beam(1);     
}

function beam(n)
{
  if(n<5)
  {
    if(nav)
    { 
      eval("document.div"+n+".top="+y);
      eval("document.div"+n+".left="+x);
      eval("document.div"+n+".visibility='visible'");
    }  
    else
    {
      eval("div"+n+".style.top="+y);
      eval("div"+n+".style.left="+x);
      eval("div"+n+".style.visibility='visible'");
    }
    n++;
    tmr=setTimeout("beam("+n+")",spd);
  }
  else
  {
     clearTimeout(tmr);
     fade(4);
  }   
} 

function fade(n)
{
  if(n>0) 
  {
    if(nav)eval("document.div"+n+".visibility='hidden'");
    else eval("div"+n+".style.visibility='hidden'"); 
    n--;
    tmr=setTimeout("fade("+n+")",spd);
  }
  else clearTimeout(tmr);
} 

// -->
</script>
<br>
<br>
<center><font color=red face="隶书" size=6>非图片鼠标跟踪器</font></center>
<br>
<br><center>
<table border=5 bordercolor=blue borderlight=green>
<tr><td align=center><font size=5 color=red face="Arial, Helvetica, sans-serif"><strong>看到效果了吧！！</strong></font></td></tr>
</table></center>
<br>
<br>
<center>
<textarea name=source rows=12 cols=45 class=yk9>
脚本说明:
第一步：把如下代码加入<body>区域中
<STYLE TYPE="text/css">
<!--

BODY{
overflow:scroll;
overflow-x:hidden;
}

.s1
{
  position  : absolute;
  font-size : 12pt;
  color     : blue;
  visibility: hidden;
}

.s2
{
  position  : absolute;
  font-size : 20pt;
  color     : red;
	visibility : hidden;
}

.s3
{
  position  : absolute;
  font-size : 16pt;
  color     : gold;
	visibility : hidden;
}

.s4
{
  position  : absolute;
  font-size : 14pt;
  color     : lime;
	visibility : hidden;
}
-->
</STYLE>


第二步：把如下代码加入<body>区域中
<DIV ID="div1" CLASS="s1">*</DIV>
<DIV ID="div2" CLASS="s2">*</DIV>
<DIV ID="div3" CLASS="s3">*</DIV>
<DIV ID="div4" CLASS="s4">*</DIV>


<script language="javascript" type="text/javascript" class="s5">

var nav = (document.layers);
var tmr = null;
var spd = 50;
var x = 0;
var x_offset = 5;
var y = 0;
var y_offset = 15;

if(nav) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse; 

function get_mouse(e)
{    
  x = (nav) ? e.pageX : event.clientX+document.body.scrollLeft;
  y = (nav) ? e.pageY : event.clientY+document.body.scrollTop;
  x += x_offset;
  y += y_offset;
  beam(1);     
}

function beam(n)
{
  if(n<5)
  {
    if(nav)
    { 
      eval("document.div"+n+".top="+y);
      eval("document.div"+n+".left="+x);
      eval("document.div"+n+".visibility='visible'");
    }  
    else
    {
      eval("div"+n+".style.top="+y);
      eval("div"+n+".style.left="+x);
      eval("div"+n+".style.visibility='visible'");
    }
    n++;
    tmr=setTimeout("beam("+n+")",spd);
  }
  else
  {
     clearTimeout(tmr);
     fade(4);
  }   
} 

function fade(n)
{
  if(n>0) 
  {
    if(nav)eval("document.div"+n+".visibility='hidden'");
    else eval("div"+n+".style.visibility='hidden'"); 
    n--;
    tmr=setTimeout("fade("+n+")",spd);
  }
  else clearTimeout(tmr);
} 

// -->
</script>
</textarea>
<SCRIPT LANGUAGE="JavaScript">

<!-- hide

function goHist(a) 

{

   history.go(a);

}

//-->

</script>

<FORM METHOD="post">
<INPUT TYPE="button" VALUE="返回" onClick="goHist(-1)" style="background-color: #8000FF; color: rgb(255,255,255)">
</form>
</center>
<br>
<br>
</body>
</html>
⌨️ 快捷键说明

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