我们经常会遇到一种效果,那就是当鼠标移动到某一个链接上时显示一个浮动层,里面显示具体的详细信息。也就是用div模拟title的效果。
例如,html中有一个更多的a标签:
<a onmouseover="showMore(event,'divId');">更多</a> <div id='divId' style="display: none" class='more_info'>更多详细内容</div>
这里是css样式
.more_info{ position: absolute; left: 0px; top: 0px; border: 1px solid #CCC; background-color: #FFE9D0; padding: 5px; }
这是js方法(这里用到了jquery这个js库,其实也可以不需要用到的,我这里为了方便吧,就用了。)
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'}); }其中的难点主要就是滚动条的滚动条距离,以及其兼容性问题。在ie下只能用document.documentElement.scrollLeft;其他浏览器下window.scrollX即可。