记录鼠标移动并可回放的脚本

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

介绍：用来记录鼠标移动的位置，可以快放、慢放、倒放。

演示：

<!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>
<script language="JavaScript">
<!--
var mousex=new Array();
var mousey=new Array();
var i;
var j=0;
var k;
var recordcount=0;
var repeat;
var repeat2;
var repeat3;
var speed=50;

function startthis() {
recordcount=1;
i=0;
mousex=new Array();
mousey=new Array();
recordthis();
}

function recordthis() {
if (maxnum.value=='' || isNaN(maxnum.value) == true || maxnum.value<0) {
	if (recordcount==1) {
	mousex[i]=mousefollow.offsetLeft;
	mousey[i]=mousefollow.offsetTop;
	i++;
	k=i;
	textfield.value='无时间限制';
	}
}
else {
	if (recordcount==1) {
		if (i<maxnum.value) {
		mousex[i]=mousefollow.offsetLeft;
		mousey[i]=mousefollow.offsetTop;
		i++;
		k=i;
		textfield.value='剩余'+(maxnum.value-i)+'/50秒';
		}
		else {
		recordcount=0;
		textfield.value='时间到';}
		}
	}
repeat=setTimeout("recordthis()",20);
}

function stopthis() {
clearTimeout("repeat");
recordcount=0;
}

function playthis() {
clearTimeout("repeat");
clearTimeout("repeat3");
recordcount=0;
if (j<i-1) {
	arrow.style.pixelLeft=mousex[j];
	arrow.style.pixelTop=mousey[j];
	arrow.style.visibility='visible';
	j++;
	repeat2=setTimeout("playthis()",speed);
	}
else {clearTimeout("repeat2");
	arrow.style.visibility='hidden';
	j=0;
	}
}

function rewindthis() {
clearTimeout("repeat");
clearTimeout("repeat2");
recordcount=0;
if (k>0) {
	arrow.style.pixelLeft=mousex[k-1];
	arrow.style.pixelTop=mousey[k-1];
	arrow.style.visibility='visible';
	k--;
	repeat3=setTimeout("rewindthis()",speed);
	}
else {clearTimeout("repeat3");
	arrow.style.visibility='hidden';
	k=i;
	}
}

function follow() {
mousefollow.style.pixelLeft=document.body.scrollLeft+event.clientX;
mousefollow.style.pixelTop=document.body.scrollTop+event.clientY;
}
// -->
</script>
</head>
<body bgcolor="" onmousemove="follow()">
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<div id="arrow" style="position:absolute; width:12px; height:21px; z-index:1;visibility:hidden"><img src="/texiao/zzsc_demo/arrow.gif" width="12" height="21"></div>
<div id="mousefollow" style="position:absolute; width:12px; height:21px; z-index:1;visibility:hidden"> </div>
<input type="text" name="maxnum" size="4" maxlength="4"><input type=button onclick=startthis() value=录制><input type=button onclick=stopthis() value=停止><input type=button onclick="speed=50;playthis()" value=播放><input type=button onclick="speed=10;playthis()" value=快放><input type=button onclick="speed=150;playthis()" value=慢放><input type=button onclick="speed=50;rewindthis()" value=倒放><input type="button" name="textfield" style="width:100px" value="无时间限制">
</td>
</tr>
</table>
</body>
</html>

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

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

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

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

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

function startthis() {
recordcount=1;
i=0;
mousex=new Array();
mousey=new Array();
recordthis();
}

function stopthis() {
clearTimeout("repeat");
recordcount=0;
}

function follow() {
mousefollow.style.pixelLeft=document.body.scrollLeft+event.clientX;
mousefollow.style.pixelTop=document.body.scrollTop+event.clientY;
}
// -->
</script>