posts - 165, comments - 198, trackbacks - 0, articles - 1
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

javascript 鼠标跟随+位置显示

Posted on 2008-04-15 13:41 G_G 阅读(3054) 评论(2)  编辑  收藏 所属分类: javascript

参考 :http://www.codebit.cn/pub/html/javascript/tip/mouse_position/
<script type="text/javascript"> 

function mousePosition(ev){
    //支持 火狐
    
if(ev.pageX || ev.pageY){
        
return {x:ev.pageX, y:ev.pageY};
    }
    //支持IE
    
return {
        x:ev.clientX 
+ document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY 
+ document.body.scrollTop - document.body.clientTop
    };
}

function mouseMove(ev){
    ev 
= ev || window.event;
    
var mousePos = mousePosition(ev);
        
       document.getElementById('div1').innerHTML 
= mousePos.x +":"+mousePos.y ;
       document.getElementById('div1').style.left 
= mousePos.x+10;
       document.getElementById('div1').style.top 
= mousePos.y+50;
}

//事件添加
document.onmousemove 
= mouseMove;


</script>
<body>
    
<p id='pi'></p>
    
<div id='div1'  style="position:absolute;  
  left:50;  
  top:10;  
  z-index:1000;  
  padding:0px;  
  background-color:#FFFFCC;  
  color:#201000;  
  font-size:12px;  
  border:1px   solid   #284860;
"></div>   
</body>

直接运行



评论

# re: javascript 鼠标跟随+位置显示  回复  更多评论   

2008-08-29 16:21 by shopzyw
Very good!!!
Very good!!!

# re: javascript 鼠标跟随+位置显示  回复  更多评论   

2009-01-19 11:25 by Guy
thank you

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


网站导航: