我是郭大侠

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
show div and mouse can move on the div

注:鼠标移动到链接上显示div,鼠标可以移动到层上,离开层时层消失.IE6,ff下测试通过,其它浏览器未测试.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>show div and move on div</title>
<style type="text/css">
    .floatPic{
        display:none;
        position:absolute;
        width:200px;
        height:100px;
        boder:1px;
        background:lightblue;
    }
</style>
<script type="text/javascript">
    var fhide=true;
    function ShowFloatPic(obj,evt)
    {
        fhide=false;
        var div=document.getElementById("divinfo");
        div.innerHTML="";
        var itext=obj.firstChild.nodeValue;
        var tnode=document.createTextNode(itext,true);
        div.appendChild(tnode);
        div.style.display="block";
        div.style.left=evt.clientX+30;
        div.style.top=evt.clientY;
    }
    function prepareHide()
    {
        fhide=true;
        setTimeout("tryHide()",500);
        //setTimeout(function(){if (fhide){HideFloatPic();}},500);
    }
    function tryHide()
    {
        if (fhide)
        {
            HideFloatPic();
        }
    }
    function HideFloatPic()
    {
        var div=document.getElementById("divinfo");
        div.style.display="none";
    }
    function cancelHide()
    {
        fhide=false;
    }
</script>
</head>

<body style="margin:0;padding:0">
    <li><a href="#" onmouseover="ShowFloatPic(this,event)" onmouseout="prepareHide()">黄瓜</a></li>
    <li><a href="#" onmouseover="ShowFloatPic(this,event)" onmouseout="prepareHide()">土豆</a></li>
    <li><a href="#" onmouseover="ShowFloatPic(this,event)" onmouseout="prepareHide()">西瓜</a></li>
    <li><a href="#" onmouseover="ShowFloatPic(this,event)" onmouseout="prepareHide()">西红柿</a></li>
    <div id="divinfo" class="floatPic" onmouseover="cancelHide();" onmouseout="HideFloatPic();" ></div>
</body>
</html>

附：另外一个版本，即使div上有链接，鼠标放到链接上，div也不会关闭。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>show div and move on div</title>

<script type="text/javascript">
    var fhide=true;
    var X1,Y1,X3,Y3;
    var xPos,yPos;
    var mousePos;
    function ShowFloatPic(obj,evt)
    {
        fhide=false;
        var div=document.getElementById("divinfo");
        div.innerHTML="<a href='http://www.baidu.com'>百度</a><br/><input type='text' size='10' /><br/>";
        //div.innerHTML="";
        var itext=obj.firstChild.nodeValue;
        var tnode=document.createTextNode(itext,true);
        div.appendChild(tnode);
        div.style.display="block";
        div.style.left=evt.clientX+30;
        div.style.top=evt.clientY;
        
        /*********************************
        显示DIV的坐标
        ********************************* */
        X1=parseInt(div.style.left);
        Y1=parseInt(div.style.top);
        X3=X1+parseInt(div.style.width);
        Y3=Y1+parseInt(div.style.height);
        var str="div坐标:("+X1+','+Y1+")("+ X3 +","+ Y3 +")";
        document.getElementById('lblInfo').innerHTML=str;
    }
    function prepareHide()
    {
        fhide=true;
        setTimeout("tryHide()",500);
    }
    function tryHide()
    {
        if (fhide)
        {
            xPos=mousePos.x;
            yPos=mousePos.y;
            document.getElementById('span1').innerHTML="鼠标位置:"+xPos+','+yPos;
            if (xPos>X1 && xPos<X3 && yPos>Y1 && yPos<Y3) return;
            var div=document.getElementById("divinfo");
            div.style.display="none";
            document.getElementById('lblInfo').innerHTML="";
        }
    }
    function cancelHide()
    {
        fhide=false;
    }
    
    /*************************************************
    获取鼠标在屏幕上的位置
    ************************************************ 
    document.onmousemove=function(evt){      
        evt=evt || window.event;     
        if(evt.pageX){          
            xPos=evt.pageX;          
            yPos=evt.pageY;      
        } 
        else 
        {
            xPos=evt.clientX+document.body.scrollLeft-document.body.clientLeft;          
            yPos=evt.clientY+document.body.scrollTop-document.body.clientTop;      
        }
        document.getElementById('span1').innerHTML="鼠标位置:"+xPos+','+yPos;
    }; */
    
    
    /****************************************************
    实时获取鼠标位置
    *************************************************** */
    document.onmousemove = mouseMove;
    function mouseMove(ev){
        ev = ev || window.event;
        mousePos= mouseCoords(ev);
    }   
    function mouseCoords(ev)
    {      
        if(ev.pageX || ev.pageY)
        {          
            return {x:ev.pageX, y:ev.pageY};       
        }      
        return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop- document.body.clientTop};  
    } 

</script>
</head>

<body style="margin:0;padding:0">
<ul>
    <li><a href="#" onmouseover="ShowFloatPic(this,event)" onmouseout="prepareHide()">黄瓜</a></li>
    <li><a href="#" onmouseover="ShowFloatPic(this,event)" onmouseout="prepareHide()">土豆</a></li>
    <li><a href="#" onmouseover="ShowFloatPic(this,event)" onmouseout="prepareHide()">西瓜</a></li>
    <li><a href="#" onmouseover="ShowFloatPic(this,event)" onmouseout="prepareHide()">西红柿</a></li>
</ul>

<br /><br /><br /><br /><br /><br />
<span id="lblInfo"></span><br />
<span id="span1"></span>

<div id="divinfo" style="display:none;position:absolute;width:200px;height:100px;border:solid 1px #000000;background:lightblue;" onmouseover="cancelHide();" onmouseout="prepareHide();" ></div>
</body>
</html>

 

posted on 2009-06-25 13:05  郭大侠  阅读(2492)  评论(11)  编辑  收藏  举报

青花帽筒
青花帽筒

龙凤罐
龙凤罐

紫檀笔筒
小罐