« »

Hiệu ứng sẽ tạo ra một khung giả lập màn hình và các nút để ta có thể thu lại hoạt động của con trỏ chuột trên trang web.

Nhãn: Theo dõi hoạt động của chuột

Báo cho chúng tôi lỗi JavaScript này

Demo
Phóng to
Tải lại
Cửa sổ mới

Mã nguồn
JavaScript
HTML
In

Copy All x2

<SCRIPT>
var posX, posY;
var path  = new Array();
var index = 0;
var Num = 0;
var save  = false;
var track = false
begintag = '<font face="Tahoma, Arial" size=1 color=black>'

function moveTo(x,y) // Cursor picture movement
	{
	rep.style.pixelLeft=x;
	rep.style.pixelTop=y;
	}
function drawTo(x,y) // Dot movement
	{
	dot.style.pixelLeft=x*200/screen.width+150;
	dot.style.pixelTop=y*150/screen.height+15;
	}
function wTo(x,y) // Data showing
	{
	data.innerHTML=begintag+'['+x+','+y+']</font>';
	}
function savePath() // Path save, if you suppose fast mouse movements, reduce TimeOut
	{
	if((posX && posY) && save)
		{
		path[index]   = posX;
		path[index+1] = posY;
		index += 2;
		setTimeout('savePath()',10);
		}
	}
function run() //Replay the record
	{
	if(Num < (path.length-1))
		{
		moveTo(path[Num],path[Num+1])
		drawTo(path[Num],path[Num+1])
		wTo(path[Num],path[Num+1])
		Num += 2;
		setTimeout('run()',10);
		}
		else Num=0;
	}
function cursor()
	{
	posX=event.x+document.body.scrollLeft;
	posY=event.y+document.body.scrollTop;
	}
function record()
	{
	if (!track)
		{
		index = 0;
		save = true;
		savePath();
		}
	else data.innerHTML=begintag+"A path has been recorded in memory.<br>Click 'Reset' if you wish to record new one.</font>";
	}
function stop_record()
	{
	save    = false;
	index   = 0;
	time   = (path.length/2)*0.1;
	cValue = ""+time;
	value   = cValue.substring(0,4);
	s       = (cValue.substring(0) == 1 && cValue.indexOf(".") == -1)?"":"s";
	data.innerHTML=begintag+"Time recorded in memory: "+value+" second"+s+" with interval 0.1s</font>";
	track   = true;
	}
function reset()
	{
	rep.style.pixelLeft=50
	rep.style.pixelTop=150
	dot.style.pixelLeft=160;
	dot.style.pixelTop=40;
	data.innerHTML='';
	posX=posY='';
	path  = new Array();
	index = 0;
	Num = 0;
	save  = false;
	track = false;
	}
document.onmousemove = cursor;
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<DIV id=rep 
style="Z-INDEX: 3; LEFT: 50px; WIDTH: 17px; POSITION: absolute; TOP: 150px; HEIGHT: 22px"><IMG 
height=22 src="cursor.gif" width=17></DIV>
<DIV id=dot 
style="Z-INDEX: 3; LEFT: 160px; WIDTH: 5px; POSITION: absolute; TOP: 40px; HEIGHT: 5px"><FONT 
color=red size=1><B>+</B></FONT></DIV>
<DIV id=data 
style="Z-INDEX: 2; LEFT: 152px; WIDTH: 196px; POSITION: absolute; TOP: 15px; HEIGHT: 30px"></DIV>
<DIV id=map 
style="BORDER-RIGHT: teal 1px solid; BORDER-TOP: teal 1px solid; Z-INDEX: 1; BACKGROUND: aqua; LEFT: 150px; BORDER-LEFT: teal 1px solid; WIDTH: 200px; BORDER-BOTTOM: teal 1px solid; POSITION: absolute; TOP: 15px; HEIGHT: 150px"></DIV><INPUT onclick=record() type=button value=Record><BR><BR><INPUT onclick=stop_record() type=button value="Stop Record"><BR><BR><INPUT onclick=reset() type=button value=Reset><BR><BR><INPUT onclick=run() type=button value=Replay> 
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->