一个新手的问题

什么叫 动态拉出一个框？
触发onmouseover和onmouseout事件

解决方案 »

  1.   

    前两天回别的帖子的时候做了，
    给你参考一下。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <style type="text/css">
            <!-- #div1 {
                position: relative;
                height: 25px;
                width: 60px;
                background-color: #FFD5AA;
            } #div2 {
                position: absolute;
                top: 25px;
                left: 0px;
                background-color: #B5FFB5;
            }
            -->
            </style>
            <script type="text/javascript">
                <!--
                var stop = null;
                window.onload = function(){
                    $("div1").onmouseover = mouseOver;
                    function mouseOver(e){
                        e = e || window.event;
                        if (stop) {
                            clearTimeout(stop);
                        }
                        $("div2").style.display = "block";
                        expand($("div2"), "+", 140, "block");
                    }
                    $("div1").onmouseout = $("div2").onmouseout = function(e){
                        e = e || window.event;
                        var elFrom = e.fromElement || e.target;
                        var elTo = e.toElement || e.relatedTarget;
                        if ((elFrom.id == "div1" && elTo.id == "div2") || (elFrom.id == "div2" && elTo.id == "div1")) {
                            return;
                        }
                        if (stop) {
                            clearTimeout(stop);
                        }
                        expand($("div2"), "-", 0, "none");
                    }
                }
                function expand(o, fuhao, wh, dis){
                    if (parseInt(o.style.height) == wh || parseInt(o.style.height) == wh) {
                        clearTimeout(stop);
                        o.style.display = dis;
                        stop = null;
                        return;
                    }
                    eval("var th = parseInt(o.style.height)" + fuhao + "5");
                    eval("var tw = parseInt(o.style.height)" + fuhao + "5");
                    o.style.height = th + "px";
                    o.style.width = tw + "px";
                    stop = setTimeout(function(){
                        expand(o, fuhao, wh, dis)
                    }, 10);
                }
                
                function $(oid){
                    return document.getElementById(oid);
                }
                
                //-->  
            </script>
        </head>
        <body>
            <div id="div1">
                <div id="div2" style="width:0px;height:0px;display:none;">
                </div>
            </div>
        </body>
    </html>