我做的一个splitter-优快云博客

本文链接：https://blog.youkuaiyun.com/overmind/article/details/1122345

本文介绍了一种使用HTML与JavaScript实现的网页布局方法，通过动态调整框架宽度来改变左侧导航栏的状态，同时提供了鼠标悬停及点击事件的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml" >
<head>
    <title>aaa</title>
    <script type="text/javascript">
    var isLeftFrameExpand = true;
    function moveBar(){
        if(isLeftFrameExpand){
            document.all["LeftFrame"].style.width="0px";
            isLeftFrameExpand = false;
        }
        else{
            document.all["LeftFrame"].style.width="200px";
            isLeftFrameExpand = true;
        }
    }

    function MouseOutBar(){
        if(isLeftFrameExpand){
            document.all["ExpandBar"].src='./testSpliter/images/splitter_horColHover.gif';
        }
        else{
            document.all["ExpandBar"].src='./testSpliter/images/splitter_horExpHover.gif';
        }
    }

    function MouseOnBar(){
        if(isLeftFrameExpand){
            document.all["ExpandBar"].src='./testSpliter/images/splitter_horCol.gif';
        }
        else{
            document.all["ExpandBar"].src='./testSpliter/images/splitter_horExp.gif';
        }
    }

    this.src='./testSpliter/images/splitter_horCol.gif'
    </script>
</head>
<body>
<table border="0px" cellpadding="0px" cellspacing="0px" style=" position:absolute; left:0px;top:0px">
<tr>
    <td><iframe id="LeftFrame" frameborder="0" src="left.htm" style="overflow:scroll; border:0px" width="200px"></iframe></td>
    <td>
    <table border="0px" cellpadding="0px" cellspacing="0px">
        <tr><td style=" height:240px; background-image:url('./testSpliter/images/splitter_horBg.gif')" > </td></tr>
        <tr><td style=" height:80px; background-image:url('./testSpliter/images/splitter_horBg.gif')" ><img id="ExpandBar" src="./testSpliter/images/splitter_horColHover.gif" alt="" onmousemove="javascript:MouseOnBar();" onmouseout="javascript:MouseOutBar();" onclick="javascript:moveBar();"/></td></tr>
        <tr><td style=" height:240px; background-image:url('./testSpliter/images/splitter_horBg.gif')" ></td></tr>
    </table>
    </td>
    <td><iframe id="RightFrame" frameborder="0" src="right.htm" style="overflow:scroll;border:0px"></iframe></td>
</tr>
</table>
</body>
</html>