• 2008-01-27

    跨双iframe进行拖拽伸缩(兼容ie&ff) - [技术空间]

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

    写了一段代码,跨双iframe进行拖拽伸缩,并且屏蔽内容选取和右键菜单。兼容ie和ff。在ff下请自建任意内容的bwbb-zys-index.htm和bwbb-index.htm等文件用于查看效果。
    <link rel="stylesheet" href="http://www.zzjianghu.com/style/main.css">
    <style>
    body{-moz-user-select:none;}
    </style>
    <body bgcolor="#9F6835" background="image/bg.jpg" leftmargin="0" topmargin="18" onselectstart="return false;">
    <center>
       <table width="935" height="35" border="0" cellpadding="0" cellspacing="0" background="http://www.zzjianghu.com/image/index33.gif">
              <tr>
                <td width="582" height="100%" valign="top">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>

                 <td height="35">    您现在的位置:<a href="home.asp">庄子江湖网</a>
          > 白文版本 > <a href="bwbb-zys.htm">张远山版</a>  
           <select name="select" id="mysel" class="inputs" style=" WIDTH: 120px" onChange="window.open(this.options[this.selectedIndex].value,'left')">
            <option value="bwbb-zys-index.htm">《庄子》目录</option>
            <option value="bwbb-zys-index-01.htm">逍遥游第一</option>
            <option value="bwbb-zys-index-02.htm">齐物论第二</option>
            <option value="bwbb-zys-index-03.htm">养生主第三</option>
            <option value="bwbb-zys-index-04.htm">人间世第四</option>
            <option value="bwbb-zys-index-05.htm">德充符第五</option>
            <option value="bwbb-zys-index-06.htm">大宗师第六</option>
            <option value="bwbb-zys-index-07.htm">应帝王第七</option>
            <option value="bwbb-zys-index-08.htm">骈拇第八</option>
            <option value="bwbb-zys-index-09.htm">马蹄第九</option>
            <option value="bwbb-zys-index-10.htm">胠箧第十</option>
            <option value="bwbb-zys-index-11.htm">在宥第十一</option>
            <option value="bwbb-zys-index-12.htm">天地第十二</option>
            <option value="bwbb-zys-index-13.htm">天道第十三</option>
            <option value="bwbb-zys-index-14.htm">天运第十四</option>
            <option value="bwbb-zys-index-15.htm">刻意第十五</option>
            <option value="bwbb-zys-index-16.htm">缮性第十六</option>
            <option value="bwbb-zys-index-17.htm">秋水第十七</option>
            <option value="bwbb-zys-index-18.htm">至乐第十八</option>
            <option value="bwbb-zys-index-19.htm">达生第十九</option>
            <option value="bwbb-zys-index-20.htm">山木第二十</option>
            <option value="bwbb-zys-index-21.htm">田子方第二十一</option>
            <option value="bwbb-zys-index-22.htm">知北游第二十二</option>
            <option value="bwbb-zys-index-23.htm">庚桑楚第二十三</option>
            <option value="bwbb-zys-index-24.htm">徐无鬼第二十四</option>
            <option value="bwbb-zys-index-25.htm">则阳第二十五</option>
            <option value="bwbb-zys-index-26.htm">外物第二十六</option>
            <option value="bwbb-zys-index-27.htm">寓言第二十七</option>
            <option value="bwbb-zys-index-28.htm">让王第二十八</option>
            <option value="bwbb-zys-index-29.htm">盗跖第二十九</option>
            <option value="bwbb-zys-index-30.htm">说剑第三十</option>
            <option value="bwbb-zys-index-31.htm">渔父第三十一</option>
            <option value="bwbb-zys-index-32.htm">列禦寇第三十二</option>
            <option value="bwbb-zys-index-33.htm">天下第三十三</option>
          </select></td>
         </tr>

          </table>
         </td>
            <td width="8"> </td>
                <td width="345" align="right" valign="top">
       <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>

                            <td height="35" align="center"> 
                        <select name="select2" class="inputs" style=" WIDTH: 80px" onChange="window.open(this.options[this.selectedIndex].value,'right')">
                          <option value="bwbb-index.htm">版本列表</option>
                          <option value="bwbb-gqf-index.htm">郭庆藩版</option>
                          <option value="bwbb-wxq-index.htm">王先谦版</option>
                          <option value="bwbb-nhzj-index.htm">道藏版</option>
                          <option value="bwbb-lwd-index.htm">刘文典版</option>
                          <option value="bwbb-wsm-index.htm">王叔岷版</option>
                          <option value="bwbb-cgy-index.htm">陈鼓应版</option>
                          <option value="bwbb-en-index.htm">英文版</option>
                        </select></td>
                    </tr>

                  </table>
         </td>
              </tr>
            </table>
       <table width="935" height="314" border="0" cellpadding="0" cellspacing="0" background="http://www.zzjianghu.com/image/index35.gif" id="myborder">
     
              <tr>
                <td id="left" width="582" height="100%" valign="top">
       <table width="100%" border="0" cellspacing="0" cellpadding="0">

                    <tr>
                      <td height="500" align="center"><iframe onload="myset()" src="bwbb-zys-index.htm" id="left" name="left" height="500" width="93%" frameborder="0" scrolling="yes"></iframe></td>
                    </tr>

                  </table>
         </td>
            <td  width="8" style="background:#fbecd7"> </td>
                <td id="right" width="345" align="right" valign="top">
       <table width="100%" border="0" cellspacing="0" cellpadding="0">

                    <tr>
                      <td height="500" align="center"><iframe onload="myset()" src="bwbb-index.htm" id="right" name="right" height="500" width="93%" frameborder="0" scrolling="yes"></iframe></td>
                    </tr>

                  </table>
         </td>
              </tr>
            </table>
        <table width="935" height="30" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="100%" height="100%" valign="top" background="http://www.zzjianghu.com/image/index36.gif">
         </td>
              </tr>
            </table>
      </center>
      <script>
    bx=0;
    ifmove=false;
    objl=0;objt=0;objw=0;objh=0;
    function mymovestart(e)
    {
    if(!e)e=event||window.frames[0].event||window.frames[1].event;
    if(!document.all)e.preventDefault();
    if(document.all)
    e.srcElement.style.cursor="e-resize";
    else
    e.target.style.cursor="e-resize";
    ifmove=true;
    bx=e.screenX;
    }
    function mymovestop(e)
    {
    if(!e)e=event||window.frames[0].event||window.frames[1].event;
    if(document.all)
    e.srcElement.style.cursor="default";
    else
    e.target.style.cursor="default";
    ifmove=false;
    }
    function mymove(e)
    {
    if(!e)e=event||window.frames[0].event||window.frames[1].event;
    if(e.button==0&&document.all)mymovestop(e);
    if(e.screenX<objl||e.screenX>objl+objw||e.screenY<objt||e.screenY>objt+objh)
    mymovestop(e);
    if(ifmove)
    {
    off=parseInt(document.getElementById("left").width)+(e.screenX-bx);
    if(off>0)
    document.getElementById("left").width=off;
    off=parseInt(document.getElementById("right").width)-(e.screenX-bx);
    if(off>0)
    document.getElementById("right").width=off;
    bx=e.screenX;
    }
    }
    function myout(e)
    {
    if(e)
    e.target.style.cursor="default";
    }
    function myset()
    {
    document.getElementById("myborder").onmousedown=mymovestart;
    window.frames["left"].document.onmousedown=mymovestart;
    window.frames["right"].document.onmousedown=mymovestart;
    document.getElementById("myborder").onmouseup=mymovestop;
    window.frames["left"].document.onmouseup=mymovestop;
    window.frames["right"].document.onmouseup=mymovestop;
    document.getElementById("myborder").onmousemove=mymove;
    window.frames["left"].document.onmousemove=mymove;
    window.frames["right"].document.onmousemove=mymove;
    document.onmousemove=mymove;
    document.getElementById("myborder").onmouseout=myout;
    window.frames["left"].document.onmouseout=myout;
    window.frames["right"].document.onmouseout=myout;
    document.getElementById("myborder").ondragstart=function(){return false;}
    window.frames["left"].document.ondragstart=function(){return false;}
    window.frames["right"].document.ondragstart=function(){return false;}
    document.oncontextmenu=function(){return false;}
    window.frames["left"].document.oncontextmenu=function(){return false;}
    window.frames["right"].document.oncontextmenu=function(){return false;}
    window.oncontextmenu=function(){return false;}
    window.frames["left"].oncontextmenu=function(){return false;}
    window.frames["right"].oncontextmenu=function(){return false;}
    }
    function check(oElement) {
       x=0;y=0;
       el=oElement;
       while(el){
          x += el.offsetLeft;
          y += el.offsetTop;
          el=el.offsetParent;
       }
       objl=x;
       objt=y;
    }
    check(document.getElementById("myborder"));
    objw=document.getElementById("myborder").clientWidth;
    objh=document.getElementById("myborder").clientHeight;
    </script>

    分享到: