要求:鼠标移动到一张图片上(图片靠屏幕左边),从屏幕左边移出一个悬浮层,此时刚好鼠标处在悬浮层上,可以进行操作悬浮层的东西,然后鼠标移出悬浮层,悬浮层自动缩回屏幕左边.

解决方案 »

  1.   

    I think you can try this, I wrote<!-- floatBox.htm -->
    <html>
    <head>
    </head>
    <link rel="stylesheet" type="text/css" href="floatBox.css" />
    <script type="text/javascript" src="floatBox.js"></script>
    <body onload="init()">
    <a href="#" id="go" onmouseover="show(event)">here</a>
    <div id="floatBox" onmouseout="hidden(event)" onmouseover="show(event)"></div>
    </body>
    </html>/****************************************************************************/
    /* floatBox.css */
    *{
    margin: 0;
    padding: 0;
    }
    #floatBox {
    width: 150px;
    height: 300px;
    border: 1px solid red;
    position: absolute;
    background-color: #ccc;
    left: -303px;
    cursor: pointer;
    }#go {
    float: left;
    margin-top: 100px;
    padding: 20px;
    background-color: #cfc;
    font-size: 30px;
    font-weight: bold;
    }
    /****************************************************************************/
    //floatBox.js
    var main;
    var ad;
    var inited=false;
    var locked_out=false;
    var locked_in=false;
    var position_now=62;var init=function(){
    main=document.getElementById("floatBox");
    ad=document.getElementById("go");
    inited=true;
    }var show=function(e){ var px,py,i; if(!inited|locked_out){
    return;
    } if(document.all){
    px=document.body.scrollLeft+event.x;
    py=document.body.scrollTop+event.y;
    }else{
    px=e.pageX;
    py=e.pageY;
    } locked_in=false; locked_out=true; setTimeout(hidden_ad,1000);
    main.style.top=py>150?(py-150+"px"):0; setTimeout(step_out,200);
    }var hidden=function(e){ if(!inited|locked_in){
    return;
    } if(locked_out){
    locked_out=false;
    } locked_in=true; setTimeout(step_in,200);
    }var step_in=function(){
    move_in(position_now+1);
    }var step_out=function(){
    move_out(position_now);
    }var hidden_ad=function(){
    ad.style.display="none";
    }var move_out=function(code){
    if(!code|!locked_out){
    position_now=code;
    locked_out=false;
    return;
    }

    main.style.left=(30-code*code/16)+"px";
    setTimeout("move_out("+(code-1)+")",30);
    }var move_in=function(code){ if(code==62|!locked_in){
    locked_in=false;
    position_now=code;
    ad.style.display="block";
    return;
    } main.style.left=30-code*code/16+"px"; setTimeout("move_in("+(code+1)+")",30);
    }
      

  2.   

    still have problems, send mail to me: [email protected]