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![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
script
language
="javascript"
>
7
var cursor=null;
8![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
window.onload=function()
{
9
var mat=document.getElementById('mousemat');
10
mat.onmousemove=mouseObserver;
11
cursor=document.getElementById('cursor');
12
}
13![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function mouseObserver(event)
{
14
var e=event || window.event;
15
writeStatus(e);
16
drawThumbnail(e);
17
}
18![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function writeStatus(e)
{
19
window.status=e.clientX+","+e.clientY;
20
}
21![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function drawThumbnail(e)
{
22
23
cursor.style.left = ((e.clientX/5)-2) + "px";
24
cursor.style.top = ((e.clientY/5)-2) + "px";
25![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
}
27![ExpandedBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
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
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
7
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
9
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![ExpandedSubBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
13
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
14
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![ExpandedSubBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
18
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
19
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
![ExpandedSubBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
21
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
22
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![ExpandedSubBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
27
![ExpandedBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
28
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
29
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
30
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
31
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
32
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
33
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
34
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
35
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
36
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
37
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
38
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)