记录鼠标在网页中滑动轨迹的特效源码

2009-03-15　由 BestChao　发布 730 次围观 次浏览　
属于：网站建设　　+1

子曰：谁游乐无度，谁没空学习 o(∩_∩)o

相信对外挂有研究的朋友一定知道“按键精灵”这款工具，它可以记录我们鼠标及键盘的操作，然后自动生成脚本，下次如果我们重复同样的操作只要执行脚本即可帮助你完成，不过今天发个新鲜的，来个网页版记录鼠标轨迹的特效，挺有意思的，对源码有兴趣的朋友可以拿去研究下。

有什么问题请到评论中发表<br />

<!-- http://www.bestchao.com/ -->

<!-- http://www.bestchao.com -->

<!--完成效果须两步:

第一步:把下列代码放到<body>区域中-->

<script language=&#34;JavaScript&#34;>

<!--

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==&#39;&#39; || isNaN(maxnum.value) == true || maxnum.value<0) {

if (recordcount==1) {

mousex[i]=mousefollow.offsetLeft;

mousey[i]=mousefollow.offsetTop;

i++;

k=i;

textfield.value=&#39;无时间限制&#39;;

}

}

else {

if (recordcount==1) {

if (i<maxnum.value) {

mousex[i]=mousefollow.offsetLeft;

mousey[i]=mousefollow.offsetTop;

i++;

k=i;

textfield.value=&#39;剩余&#39;+(maxnum.value-i)+&#39;/50秒&#39;;

}

else {

recordcount=0;

textfield.value=&#39;时间到&#39;;}

}

}

repeat=setTimeout(&#34;recordthis()&#34;,20);

}

function stopthis() {

clearTimeout(&#34;repeat&#34;);

recordcount=0;

}

function playthis() {

clearTimeout(&#34;repeat&#34;);

clearTimeout(&#34;repeat3&#34;);

recordcount=0;

if (j<i-1) {

arrow.style.pixelLeft=mousex[j];

arrow.style.pixelTop=mousey[j];

arrow.style.visibility=&#39;visible&#39;;

j++;

repeat2=setTimeout(&#34;playthis()&#34;,speed);

}

else {clearTimeout(&#34;repeat2&#34;);

arrow.style.visibility=&#39;hidden&#39;;

j=0;

}

}

function rewindthis() {

clearTimeout(&#34;repeat&#34;);

clearTimeout(&#34;repeat2&#34;);

recordcount=0;

if (k>0) {

arrow.style.pixelLeft=mousex[k-1];

arrow.style.pixelTop=mousey[k-1];

arrow.style.visibility=&#39;visible&#39;;

k--;

repeat3=setTimeout(&#34;rewindthis()&#34;,speed);

}

else {clearTimeout(&#34;repeat3&#34;);

arrow.style.visibility=&#39;hidden&#39;;

k=i;

}

}

function follow() {

mousefollow.style.pixelLeft=document.body.scrollLeft+event.clientX;

mousefollow.style.pixelTop=document.body.scrollTop+event.clientY;

}

// -->

</script>

<div id=&#34;arrow&#34; style=&#34;position:absolute; width:12px; height:21px; z-index:1;visibility:hidden&#34;><img src=&#34;http://www.bestchao.com/images/logo.gif&#34; ></div>

<div id=&#34;mousefollow&#34; style=&#34;position:absolute; width:12px; height:21px; z-index:1;visibility:hidden&#34;>.</div>

<input type=&#34;text&#34; name=&#34;maxnum&#34; size=&#34;4&#34; maxlength=&#34;4&#34;><input type=button onclick=startthis() value=录制><input type=button onclick=stopthis() value=停止><input type=button onclick=&#34;speed=50;playthis()&#34; value=播放><input type=button onclick=&#34;speed=2;playthis()&#34; value=快放><input type=button onclick=&#34;speed=150;playthis()&#34; value=慢放><input type=button onclick=&#34;speed=50;rewindthis()&#34; value=倒放><input type=&#34;button&#34; name=&#34;textfield&#34; style=&#34;width:100px&#34; value=&#34;无时间限制&#34;>

<!--第二步:把如下代码加入<body>区域中-->

<body onmousemove=follow()>

有什么问题请到评论中发表<br />

<!-- http://www.bestchao.com/ -->

<!-- http://www.bestchao.com -->

<!--完成效果须两步:

第一步:把下列代码放到<body>区域中-->

<script language=&#34;JavaScript&#34;>

<!--

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==&#39;&#39; || isNaN(maxnum.value) == true || maxnum.value<0) {

if (recordcount==1) {

mousex[i]=mousefollow.offsetLeft;

mousey[i]=mousefollow.offsetTop;

i++;

k=i;

textfield.value=&#39;无时间限制&#39;;

}

}

else {

if (recordcount==1) {

if (i<maxnum.value) {

mousex[i]=mousefollow.offsetLeft;

mousey[i]=mousefollow.offsetTop;

i++;

k=i;

textfield.value=&#39;剩余&#39;+(maxnum.value-i)+&#39;/50秒&#39;;

}

else {

recordcount=0;

textfield.value=&#39;时间到&#39;;}

}

}

repeat=setTimeout(&#34;recordthis()&#34;,20);

}

function stopthis() {

clearTimeout(&#34;repeat&#34;);

recordcount=0;

}

function playthis() {

clearTimeout(&#34;repeat&#34;);

clearTimeout(&#34;repeat3&#34;);

recordcount=0;

if (j<i-1) {

arrow.style.pixelLeft=mousex[j];

arrow.style.pixelTop=mousey[j];

arrow.style.visibility=&#39;visible&#39;;

j++;

repeat2=setTimeout(&#34;playthis()&#34;,speed);

}

else {clearTimeout(&#34;repeat2&#34;);

arrow.style.visibility=&#39;hidden&#39;;

j=0;

}

}

function rewindthis() {

clearTimeout(&#34;repeat&#34;);

clearTimeout(&#34;repeat2&#34;);

recordcount=0;

if (k>0) {

arrow.style.pixelLeft=mousex[k-1];

arrow.style.pixelTop=mousey[k-1];

arrow.style.visibility=&#39;visible&#39;;

k--;

repeat3=setTimeout(&#34;rewindthis()&#34;,speed);

}

else {clearTimeout(&#34;repeat3&#34;);

arrow.style.visibility=&#39;hidden&#39;;

k=i;

}

}

function follow() {

mousefollow.style.pixelLeft=document.body.scrollLeft+event.clientX;

mousefollow.style.pixelTop=document.body.scrollTop+event.clientY;

}

// -->

</script>

<div id=&#34;arrow&#34; style=&#34;position:absolute; width:12px; height:21px; z-index:1;visibility:hidden&#34;><img src=&#34;http://www.bestchao.com/images/logo.gif&#34; ></div>

<div id=&#34;mousefollow&#34; style=&#34;position:absolute; width:12px; height:21px; z-index:1;visibility:hidden&#34;>.</div>

<input type=&#34;text&#34; name=&#34;maxnum&#34; size=&#34;4&#34; maxlength=&#34;4&#34;><input type=button onclick=startthis() value=录制><input type=button onclick=stopthis() value=停止><input type=button onclick=&#34;speed=50;playthis()&#34; value=播放><input type=button onclick=&#34;speed=2;playthis()&#34; value=快放><input type=button onclick=&#34;speed=150;playthis()&#34; value=慢放><input type=button onclick=&#34;speed=50;rewindthis()&#34; value=倒放><input type=&#34;button&#34; name=&#34;textfield&#34; style=&#34;width:100px&#34; value=&#34;无时间限制&#34;>

<!--第二步:把如下代码加入<body>区域中-->

<body onmousemove=follow()>

转载请注明：天津SEO » 记录鼠标在网页中滑动轨迹的特效源码

分享到：腾讯微博 QQ空间新浪微博人人网开心网豆瓣 Facebook Twitter