ajax 單個元素中實現多個回調函數的例子

1.mousemat.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Untitled Document</title>
  <link rel='stylesheet' type = 'text/css' href = 'mousemat.css'>
  <script type='text/javascript'>
   var cursor = null;
   window.onload = function(){
    var mat = document.getElementById('mousemat');
    mat.onmousemove = mouseObserver;
    cursor = document.getElementById('cursor');
   }
   function mouseObserver(event){
    var e = event || window.event;
    writeStatus(e);
    drawThumbnail(e);
   }
   function writeStatus(e){
    window.status = e.clientX + "," + e.clientY;
   }
   function drawThumbnail(e){
    cursor.style.left = ((e.clientX/5)-2) + "px";
    cursor.style.top = ((e.clientY/5)-2) + "px";
   }
  </script>
 </head>
 <body>
  <div class='mousemat' id='mousemat'></div>
  <div class='thumbnail' id='thumbnail'>
   <div class = 'cursor' id = 'cursor'></div>
  </div>
 </body>
</html>


2.mousemat.css
mousemat{
 background-color:#ffe0d0;
 border:solid maroon 0px;
 position:absolute;
 margin:0px;
 width:500px;
 height:500px;
 top:50px;
 left:50px; 
}
.thumbnail{
 background-color:#ffe0d0;
 border:solid maroon 0px;
 position:absolute;
 margin:0px;
 width:100px;
 height:100px;
 top:50px;
 left:600px; 
}
.cursor{
 background-color:blue;
 position:relative;
 height:5px;
 width:5px;
}

posted on 2006-08-11 16:12 software5168 阅读(454) 评论(0)  编辑  收藏 所属分类: Java學習


只有注册用户登录后才能发表评论。


网站导航:
 
<2006年8月>
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789

导航

统计

常用链接

留言簿(3)

随笔分类

随笔档案

收藏夹

JAVA學習網站

綜合

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜