Javascript捕获鼠标位置(跨浏览器)

Html代码
  1. Javascript获取鼠标位置,显示Memo,相当于Alt和Title属性,但是要比Alt和Title拉风啊  
  2.   
  3.   
  4. < html >   
  5.     < head >   
  6.         < script   type = "text/javascript" >   
  7.             function showMemo(evt,data) {  
  8.                 //alert(evt.clientX);  
  9.                 document.getElementById.('memo').style.left  =  evt .clientX;  
  10.                 document.getElementById.('memo').style.top  =  evt .clientY;  
  11.                 document.getElementById.('memo').innerHTML  =  data ;  
  12.                 document.getElementById.('memo').style.display  =  'block' ;  
  13.             }  
  14.             function hideMemo() {  
  15.                 document.getElementById.('memo').style.display  =  'none' ;  
  16.             }  
  17.         </ script >   
  18.     </ head >   
  19.     < body >   
  20.         < table >   
  21.             < tr >   
  22.                 < td   onmouseover ="showMemo(event,'Memo1');" onmouseout ="hideMemo();" > aaa </ td >   
  23.                 < td   onmouseover ="showMemo(event,'大家好,我是Memo2!!!');" onmouseout ="hideMemo();" > aaa </ td >   
  24.                 < td   onmouseover ="showMemo(event,'大家好,我是Memo3!!!');" onmouseout ="hideMemo();" > aaa </ td >   
  25.                 < td   onmouseover ="showMemo(event,'大家好,我是Memo4!!!');" onmouseout ="hideMemo();" > aaa </ td >   
  26.                 < td   onmouseover ="showMemo(event,'大家好,我是Memo5!!!');" onmouseout ="hideMemo();" > aaa </ td >   
  27.                 < td   onmouseover ="showMemo(event,'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');" onmouseout ="hideMemo();" > aaa </ td >   
  28.             </ tr >   
  29.             < tr >   
  30.                 < td > bbb </ td >   
  31.                 < td > bbb </ td >   
  32.                 < td > bbb </ td >   
  33.                 < td > bbb </ td >   
  34.                 < td > bbb </ td >   
  35.                 < td > bbb </ td >   
  36.             </ tr >   
  37.             < tr >   
  38.                 < td > ccc </ td >   
  39.                 < td > ccc </ td >   
  40.                 < td > ccc </ td >   
  41.                 < td > ccc </ td >   
  42.                 < td > ccc </ td >   
  43.                 < td > ccc </ td >   
  44.             </ tr >   
  45.         </ table >   
  46.         < div   id = "memo"   style = "position:absolute;border:1px solid blue;background:yellow;width:100px;display:none;word-wrap:break-word" > ddd </ div >   
  47.     </ body >   
  48. </ html >  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值