当前位置:编程学习 > 网站相关 >>

获取鼠标的绝对位置

我们经常会遇到一种效果,那就是当鼠标移动到某一个链接上时显示一个浮动层,里面显示具体的详细信息。也就是用div模拟title的效果。

例如,html中有一个更多的a标签:


[html]
<a onmouseover="showMore(event,'divId');">更多</a> 
<div id='divId'  style="display: none" class='more_info'>更多详细内容</div> 

<a onmouseover="showMore(event,'divId');">更多</a>
<div id='divId'  style="display: none" class='more_info'>更多详细内容</div>

这里是css样式


[css]
.more_info{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    border: 1px solid #CCC; 
    background-color: #FFE9D0; 
    padding: 5px; 

.more_info{
 position: absolute;
 left: 0px;
 top: 0px;
 border: 1px solid #CCC;
 background-color: #FFE9D0;
 padding: 5px;
}
这是js方法(这里用到了jquery这个js库,其实也可以不需要用到的,我这里为了方便吧,就用了。)


[javascript]
function showMore(e,id){ 
        var e = e||window.event; 
        var scrollx = window.scrollX|| document.documentElement.scrollLeft; 
        var scrolly = window.scrollY|| document.documentElement.scrollTop; 
        var x = parseFloat(e.clientX) + parseFloat(scrollx) ; 
        var y = parseFloat(e.clientY) + parseFloat(scrolly); 
        $('.more_info').hide(); 
        var $more = $('#'+id); 
        $more.css({'left':x,'top':y,'display':'block'}); 
    }  

function showMore(e,id){
  var e = e||window.event;
  var scrollx = window.scrollX|| document.documentElement.scrollLeft;
  var scrolly = window.scrollY|| document.documentElement.scrollTop;
  var x = parseFloat(e.clientX) + parseFloat(scrollx) ;
  var y = parseFloat(e.clientY) + parseFloat(scrolly);
  $('.more_info').hide();
  var $more = $('#'+id);
  $more.css({'left':x,'top':y,'display':'block'});
 } 其中的难点主要就是滚动条的滚动条距离,以及其兼容性问题

补充:综合编程 , 其他综合 ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,