• 2008-01-15

    iframe模拟frame拖动(兼容ie&ff) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/13966200.html

    写了一段iframe模拟frame拖动代码。只是偶尔会出现不平滑情况,欢迎讨论。

    <table width=955 border=0>           
    <TR>
                    <TD align=middle background=http://www.zzjianghu.com/image/index27.gif
                      height=500><IFRAME id=left name=left
                      src="http://www.zzjianghu.com/bwbb-zys-index-01.htm" frameBorder=0 width=540
                      scrolling=yes height=500></IFRAME></TD>
    <td id=myborder width=100% style="background:yellow"></td>
                    <TD align=middle background=http://www.zzjianghu.com/image/index31.gif
                      height=500><IFRAME id=right name=right
                      src="http://www.zzjianghu.com/bwbb-gqf-index-01.htm" frameBorder=0 width=320
                      scrolling=yes height=500></IFRAME></TD>
    </TR>
    </table>

    <script>
    bx=0;
    ifmove=false;
    function mymovestart(e)
    {
    document.getElementById("myborder").style.cursor="e-resize";
    ifmove=true;
    if(!e)e=event;
    bx=e.clientX;
    }
    function mymovestop()
    {
    document.getElementById("myborder").style.cursor="default";
    ifmove=false;
    }
    function mymove(e)
    {
    if(ifmove)
    {
    if(!e)e=event;
    off=parseInt(document.getElementById("left").width)+(e.clientX-bx);
    if(off>0)
    document.getElementById("left").width=off;
    off=parseInt(document.getElementById("right").width)-(e.clientX-bx);
    if(off>0)
    document.getElementById("right").width=off;
    bx=e.clientX;
    }
    }
    function myover()
    {
    document.getElementById("myborder").style.cursor="e-resize";
    }
    function myout()
    {
    mymovestop();
    }
    document.getElementById("myborder").onmousedown=mymovestart;
    document.getElementById("myborder").onmouseup=mymovestop;
    document.getElementById("myborder").onmousemove=mymove;
    document.getElementById("myborder").onmouseover=myover;
    document.getElementById("myborder").onmouseout=myout;
    document.getElementById("myborder").ondrag=function(){return false;}
    </script>

    分享到: