摇晃光标踪迹

人气：　来源：本站原创　作者：佚名　所属栏目：鼠标类　[切换到繁體中文]

介绍：这是给人深刻印象的用DHTML产生的摇晃光标效果。容易安装并且跨浏览器,你和你的访客都将会爱它!

演示：

<!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><!--body,td{font-size: 12px;}--></style>

</head>
<body bgcolor="" onLoad="startthedots()">
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<SCRIPT language=JavaScript>
window.onerror=null;
netscape = (document.layers) ? 1:0;
goodIE = (document.all) ? 1:0;
document.onmousemove=MoveHandler;
var gotthere = 0;
var count = 0;
var ietopcorner=''
var ieleftcorner=''
    toplocation = new Array( 0,30,57,80,101,125,80,80,101,125,80,0 );
temptoplocation = new Array( 50,100,100,150,150,200,200,100,150,150,200,200,0 );
    leftlocation = new Array( 0,292,318,181,181,217,263,318,181,181,217,263,-96 );
templeftlocation = new Array( 0,0,260,390,420,550,680,390,420,550,680,0 );
difftop = new Array( 0,0,0,0,0,0,0,0,0,0,0,0 );
diffleft = new Array( 0,0,0,0,0,0,0,0,0,0,0,0 );
questtop = -13;
questleft2 = -96;
if (netscape) {
   document.body=new Object()
   document.body.scrollTop=''
   document.body.scrollLeft=''
   window.captureEvents(Event.MOUSEMOVE);
   window.onMouseMove = MoveHandler; 
   var layerstart = "document.";
   var layerleft = ".left";
   var layertop = ".top";
   var layerstyle = "";
   var windowWidth = window.innerWidth;
   var windowHeight = window.innerHeight;  }
else if (goodIE) {
   ietopcorner=document.body.scrollTop
   ieleftcorner=document.body.scrollLeft
   layerstart = "document.all.";
   layerleft = ".left";
   layertop = ".top";
   layerstyle = ".style";
   windowWidth=600;
   windowHeight=400; }
// end error trapping
   var Ypos2 = 72;
   var Xpos2 = 72;
function MoveHandler(e) {
if (netscape || goodIE) {
  Xpos2 = (netscape)?e.pageX:event.x
  Ypos2 = (netscape)?e.pageY:event.y
Xorigin = Xpos2;
Yorigin = Ypos2; 
if (Ypos2 > windowHeight/2) {
if (Xpos2 > windowWidth/2) { direction = 1;} 
else { direction = -1;} }
else {
if (Xpos2 > windowWidth/2) { direction = -1;} 
else { direction = 1;} }
}}
function startthedots() {
if (goodIE) {
windowWidth=document.body.clientWidth;
windowHeight=document.body.clientHeight; }
Xorigin = 204;
Yorigin = 147; 
spin();run(); }
var OrbitSize = 200;
count=1; delay=100; direction = -1;
Count = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 );
Xpoint = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 );
Ypoint = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 );
var speed = -0.06;
var offset = 1;
  function spin() {
for ( j = 0 ; j <= 9 ; j++ ) {
Count[j] = Count[j] + (speed*direction); 
 Xpoint[j] = Xorigin + ((OrbitSize*Math.sin(Count[j])*offset)); 
 Ypoint[j] = Yorigin + (OrbitSize*Math.cos(Count[j])); }
setTimeout('spin()',3); }
function run() {
   count++; 
  for ( j = 0 ; j <= 9 ; j++ ) {
difftop[j]  = Ypoint[j] -  temptoplocation[j];
diffleft[j] = Xpoint[j] - templeftlocation[j];
diff = 30;
temptoplocation[j] = temptoplocation[j] + difftop[j]/diff;
templeftlocation[j] = templeftlocation[j] + diffleft[j]/diff;
  eval(layerstart+"a"+j+layerstyle+layerleft+" = document.body.scrollLeft+templeftlocation["+j+"]");
  eval(layerstart+"a"+j+layerstyle+layertop+" = document.body.scrollTop+temptoplocation["+j+"]"); }
setTimeout('run()', 25) }
badIE = 0;
browserName = navigator.appName.substring(0,8);
browserVer = parseFloat(navigator.appVersion);
macintosh = navigator.userAgent.indexOf("Mac");
if (browserName == "Microsof") { 
if (macintosh != -1) { badIE = 1; }
if (browserVer < 4) { badIE = 1; }
 }
</SCRIPT>
<STYLE type=text/css>
<!--
#a0 {position:absolute; left:-24; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;}
#a1 {position:absolute; left:96; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;}
#a2 {position:absolute; left:216; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;}
#a3 {position:absolute; left:338; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;}
#a4 {position:absolute; left:460; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;}
#a5 {position:absolute; left:640; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;}
#a6 {position:absolute; left:-24; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;}
#a7 {position:absolute; left:200; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;}
#a8 {position:absolute; left:300; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;}
#a9 {position:absolute; left:600; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;}
// -->
</STYLE>
<div id=a0 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a1 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a2 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a3 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a4 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a5 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a6 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a7 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a8 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a9 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：图片

　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：onLoad="startthedots()"
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

<SCRIPT language=JavaScript>
window.onerror=null;
netscape = (document.layers) ? 1:0;
goodIE = (document.all) ? 1:0;
document.onmousemove=MoveHandler;
var gotthere = 0;
var count = 0;
var ietopcorner=''
var ieleftcorner=''
    toplocation = new Array( 0,30,57,80,101,125,80,80,101,125,80,0 );
temptoplocation = new Array( 50,100,100,150,150,200,200,100,150,150,200,200,0 );
    leftlocation = new Array( 0,292,318,181,181,217,263,318,181,181,217,263,-96 );
templeftlocation = new Array( 0,0,260,390,420,550,680,390,420,550,680,0 );
difftop = new Array( 0,0,0,0,0,0,0,0,0,0,0,0 );
diffleft = new Array( 0,0,0,0,0,0,0,0,0,0,0,0 );
questtop = -13;
questleft2 = -96;
if (netscape) {
   document.body=new Object()
   document.body.scrollTop=''
   document.body.scrollLeft=''
   window.captureEvents(Event.MOUSEMOVE);
   window.onMouseMove = MoveHandler;
   var layerstart = "document.";
   var layerleft = ".left";
   var layertop = ".top";
   var layerstyle = "";
   var windowWidth = window.innerWidth;
   var windowHeight = window.innerHeight;  }
else if (goodIE) {
   ietopcorner=document.body.scrollTop
   ieleftcorner=document.body.scrollLeft
   layerstart = "document.all.";
   layerleft = ".left";
   layertop = ".top";
   layerstyle = ".style";
   windowWidth=600;
   windowHeight=400; }
// end error trapping
   var Ypos2 = 72;
   var Xpos2 = 72;
function MoveHandler(e) {
if (netscape || goodIE) {
  Xpos2 = (netscape)?e.pageX:event.x
  Ypos2 = (netscape)?e.pageY:event.y
Xorigin = Xpos2;
Yorigin = Ypos2;
if (Ypos2 > windowHeight/2) {
if (Xpos2 > windowWidth/2) { direction = 1;}
else { direction = -1;} }
else {
if (Xpos2 > windowWidth/2) { direction = -1;}
else { direction = 1;} }
}}
function startthedots() {
if (goodIE) {
windowWidth=document.body.clientWidth;
windowHeight=document.body.clientHeight; }
Xorigin = 204;
Yorigin = 147;
spin();run(); }
var OrbitSize = 200;
count=1; delay=100; direction = -1;
Count = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 );
Xpoint = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 );
Ypoint = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 );
var speed = -0.06;
var offset = 1;
  function spin() {
for ( j = 0 ; j <= 9 ; j++ ) {
Count[j] = Count[j] + (speed*direction);
Xpoint[j] = Xorigin + ((OrbitSize*Math.sin(Count[j])*offset));
Ypoint[j] = Yorigin + (OrbitSize*Math.cos(Count[j])); }
setTimeout('spin()',3); }
function run() {
   count++;
  for ( j = 0 ; j <= 9 ; j++ ) {
difftop[j]  = Ypoint[j] -  temptoplocation[j];
diffleft[j] = Xpoint[j] - templeftlocation[j];
diff = 30;
temptoplocation[j] = temptoplocation[j] + difftop[j]/diff;
templeftlocation[j] = templeftlocation[j] + diffleft[j]/diff;
  eval(layerstart+"a"+j+layerstyle+layerleft+" = document.body.scrollLeft+templeftlocation["+j+"]");
  eval(layerstart+"a"+j+layerstyle+layertop+" = document.body.scrollTop+temptoplocation["+j+"]"); }
setTimeout('run()', 25) }
badIE = 0;
browserName = navigator.appName.substring(0,8);
browserVer = parseFloat(navigator.appVersion);
macintosh = navigator.userAgent.indexOf("Mac");
if (browserName == "Microsof") {
if (macintosh != -1) { badIE = 1; }
if (browserVer < 4) { badIE = 1; }
}
</SCRIPT>
<STYLE type=text/css>

</STYLE>
<div id=a0 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a1 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a2 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a3 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a4 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a5 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a6 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a7 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a8 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>
<div id=a9 align=center><IMG height=9 src="/texiao/zzsc_demo/20070604212223699.gif" width=9></div>