1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5<link rel="stylesheet" type="text/css" href="mousemat.css" />
6
<script language="javascript">
7
var cursor=null;
8
window.onload=function(){
9 var mat=document.getElementById('mousemat');
10 mat.onmousemove=mouseObserver;
11 cursor=document.getElementById('cursor');
12
}
13 function mouseObserver(event){
14 var e=event || window.event;
15 writeStatus(e);
16 drawThumbnail(e);
17 }
18 function writeStatus(e){
19 window.status=e.clientX+","+e.clientY;
20 }
21 function drawThumbnail(e){
22
23 cursor.style.left = ((e.clientX/5)-2) + "px";
24 cursor.style.top = ((e.clientY/5)-2) + "px";
25
26 }
27
28</script>
29<title>无标题文档</title>
30</head>
31<body>
32<div class="mousemat" id="mousemat"></div>
33<div class="thumbnail" id="thumbnail">
34 <div id="cursor" class="cursor"></div>
35</div>
36</body>
37</html>
38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html>3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<link rel="stylesheet" type="text/css" href="mousemat.css" />6
<script language="javascript">
7
var cursor=null;8
window.onload=function(){
window.onload9
var mat=document.getElementById('mousemat');10
mat.onmousemove=mouseObserver;11
cursor=document.getElementById('cursor');12
}13
function mouseObserver(event){14
var e=event || window.event;15
writeStatus(e);16
drawThumbnail(e);17
}18
function writeStatus(e){19
window.status=e.clientX+","+e.clientY;20
}21
function drawThumbnail(e){22
23
cursor.style.left = ((e.clientX/5)-2) + "px";24
cursor.style.top = ((e.clientY/5)-2) + "px";25
26
}27
28
</script>29
<title>无标题文档</title>30
</head>31
<body>32
<div class="mousemat" id="mousemat"></div>33
<div class="thumbnail" id="thumbnail">34
<div id="cursor" class="cursor"></div>35
</div>36
</body>37
</html>38