鼠标事件控制div -

chenshengzun

浏览: 115070 次
性别:
来自: 广州

最近访客更多访客>>

wutenghua

yuchao86

meilixueshan

wj123567

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

鼠标事件控制div

博客分类：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>鼠标事件控制div</TITLE>
</HEAD>
<BODY>
<script>

function _show(obj){
var str = "<table width=100%><tr>"
+ "<td align='center'><a href='#' style='text-decoration:none'>办事指南</a></td>"
+ "<td align='center'><a href='#' style='text-decoration:none'>表格下载</a></td>"
+ "<td align='center'><a href='#' style='text-decoration:none'>网上咨询</a></td>"
+ "<td align='center'><a href='#' style='text-decoration:none'>网上申请</a></td>"
+ "<td align='center'><a href='#' style='text-decoration:none'>网上查询</a></td>"
+ "</tr></table>"
var pos = GetObjPos(obj);
document.getElementById("showMessage").style.left = pos.x ;
if(pos.y + obj.offsetHeight - 5 + 100 < document.body.offsetHeight){
document.getElementById("showMessage").style.top = pos.y + obj.offsetHeight - 5;
}else{
document.getElementById("showMessage").style.top = pos.y - 100;
}
document.getElementById("showMessage").innerHTML = str;
document.getElementById("showMessage").style.display="block";
}
function _disshow(){
document.getElementById("showMessage").style.display="none";
}

function CPos(x, y){
    this.x = x;
    this.y = y;
}

function GetObjPos(ATarget){
    var target = ATarget;
    var pos = new CPos(target.offsetLeft, target.offsetTop);
    var target = target.offsetParent;
    while (target){
        pos.x += target.offsetLeft;
        pos.y += target.offsetTop;
        target = target.offsetParent;
    }
    return pos;
}

</script>

<style type="text/css">
#showMessage {width:400px; height:30px; background-color:white; position:absolute; z-index:4;right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:none;}
</style>
<div id="showMessage" onmouseover="this.style.display='block';" onmouseout="this.style.display='none';">
</div>
<a href="#" style="text-decoration:none" onmouseover="_show(this,200);" onmouseout="_disshow()">显示</a> <br>

<a href="#" style="text-decoration:none" onmouseover="_show(this,200);" onmouseout="_disshow()">显示</a><br>
<a href="#" style="text-decoration:none" onmouseover="_show(this,200);" onmouseout="_disshow()">显示</a><br>
<a href="#" style="text-decoration:none" onmouseover="_show(this,200);" onmouseout="_disshow()">显示</a><br>
</BODY>
</HTML>

分享到：