日期:2014-05-16  浏览次数:20410 次

动态创建Div层
下面是个表格
编号 姓名 
2 ws_hgo2
3 ws_hgo3
4 ws_hgo4
当我的鼠标划到ws_hgo2的时候
在ws_hgo2上面就有个Div层,里面有图片,描述等信息
鼠标离开的时候,Div层消失

同理鼠标划到ws_hgo3,ws_hgo4一样!

 


------解决方案--------------------
HTML code

<style>
#otbl {
    border: 1px solid #8F8F8F;
    border-collapse: collapse;
}
#otbl td {
    border: 1px solid #8F8F8F;
    width: 60px;
    height: 30px;
}
#odiv {
    width:200px;
    height:100px;
    border: 2px solid #D0D0D0;
    background-color:#fff;
    position:absolute;
    display:none;
}

</style>
<script type="text/javascript">
<!--
 var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
 var CancelBubble = function(e){
    var e = e || window.event;
    try{
        e.cancelBubble = true;
    }catch(ex){
        try{
            e.stopPropagation();
        }catch(e){}
    }
 }

 var getTarget = function(e){
    return e.srcElement || e.target;
 }

 var absPosition = function(element){
    var iTop = iLeft = 0;
    do{
        iTop += element.offsetTop;
        iLeft += element.offsetLeft;
    }while(element = element.offsetParent);
    return {'x': iLeft, 'y': iTop};
 }
 function showTip(e, obj){
        CancelBubble(e);
        var e = e || window.event
        var otarget = getTarget(e);
        $("odiv").style.display = "block";

        with($("odiv").style){
            display="block";top=absPosition(otarget).y+"px";left=(absPosition(otarget).x+otarget.offsetWidth)+"px";
        }
        $("odiv").innerHTML = obj.innerText || obj.textContent;
        document.onmouseover = function(){
            $("odiv").style.display = "none";
            document.onmouseover = null;
        }
        $("odiv").onmouseover = function(e){
            var e = e || window.event;
            CancelBubble(e);
        }

 }
//-->
</script>

<table id="otbl">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2</td>
            <td onmouseover="showTip(event, this)">ws_hgo2 </td>
        </tr>
        <tr>
            <td>3</td>
            <td onmouseover="showTip(event, this)">ws_hgo3</td>
        </tr>
        <tr>
            <td>4</td>
            <td onmouseover="showTip(event, this)">ws_hgo4</td>
        </tr>
    </tbody>
</table>

<div id="odiv">

</div>

------解决方案--------------------
更改一下位置就行了,借用1楼代码(未判断边界)
HTML code
<style>
#otbl {
    border: 1px solid #8F8F8F;
    border-collapse: collapse;
}
#otbl td {
    border: 1px solid #8F8F8F;
    width: 60px;
    height: 30px;
}
#odiv {
    width:200px;
    height:100px;
    border: 2px solid #D0D0D0;
    background-color:#fff;
    position:absolute;
    display:none;
}

</style>
<script type="text/javascript">
<!--
 var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
 var CancelBubble = function(e){
    var e = e || window.event;
    try{
        e.cancelBubble = true;
    }catch(ex){
        try{
            e.stopPropagation();
        }catch(e){}
    }
 }

 var getTarget = function(e){
    return e.srcElement || e.target;
 }

 var absPosition = function(element){
         var el = element;
    var iTop = iLeft = 0;
    do{
        iTop += element.offsetTop;
        iLeft += element.offsetLeft;
    }while(element = element.offsetParent);
    return {'x': iLeft - $("odiv")