那家伙,JS用得妙呀!高分求解

<html><style>
  DIV {cursor: hand}
</style><body style="font-family: verdana">
<H2>Simple Drag and Resize Example</h2>
<h4>Use alt-click to multi-select</h4><input type=button value="Moving, click to resize"
  onclick="toggleMoveResize(this); return false"><div moveable=true style="position: absolute;
                   top: 150px; left: 100px;
                   width: 100px; height: 100px;
                   background-color: red;
                     border: solid 2px black">
Click and drag me
</div><div moveable=true style="position: absolute;
                   top: 150px; left: 250px;
                   width: 100px; height: 100px;
                   background-color: blue;
                     border: solid 2px black">
Click and drag me
</div><script language="JavaScript">
var activeElements = new Array();
var activeElementCount = 0;var lTop, lLeft;
var doMove = true;
var doResize = false;function toggleMoveResize(e) {
  if (doMove) {
    doMove = false;
    doResize = true;
    e.value = "Resizing, Click to Move";
  } else {
    doMove = true;
    doResize = false;
    e.value = "Moving, Click to Resize";
  }
}function mousedown() {
  var mp;  mp = findMoveable(window.event.srcElement);  if (!window.event.altKey) {
     for (i=0; i<activeElementCount; i++) {
        if (activeElements[i] != mp) {
          activeElements[i].style.borderWidth = "2px";
        }
     }
     if (mp) {
       activeElements[0] = mp;
       activeElementCount = 1;
       mp.style.borderWidth = "4px";
     } else {
       activeElementCount = 0;
     }
  } else {
     if (mp) {
       if (mp.style.borderWidth != "4px") {
         activeElements[activeElementCount] = mp;
         activeElementCount++;
         mp.style.borderWidth = "4px";
       }
     }
  }  window.status = activeElementCount;  lLeft = window.event.x;
  lTop = window.event.y;
}document.onmousedown = mousedown;function mousemove() {
  var i, dLeft, dTop;  if (window.event.button == 1) {    sx = window.event.x;
    sy = window.event.y;    dLeft = sx - lLeft;
    dTop = sy - lTop;    for (i=0; i<activeElementCount; i++) {
      if (doMove)
        moveElement(activeElements[i], dLeft, dTop);
      if (doResize)
        resizeElement(activeElements[i], dLeft, dTop);
    }    lLeft = sx;
    lTop = sy;    return false;
  }}function moveElement(mp, dLeft, dTop) {
    var e
    e = mp;
    e.style.posTop += dTop;
    e.style.posLeft += dLeft;
}function resizeElement(mp, dLeft, dTop) {
    var e;
    e = mp;
    e.style.posHeight += dTop;
    e.style.posWidth += dLeft;
}function findMoveable(e) {
  if (e.moveable == 'true')
    return e;  if (e.tagName == "BODY")
    return null;  return findMoveable(e.parentElement);
}function findDefinedMoveable(e) {
  if ((e.moveable == 'true') || (e.moveable == 'false'))
    return e;  if (e.tagName == "BODY")
    return null;  return findDefinedMoveable(e.parentElement);
}function rfalse() {
  return false;
}document.onmousemove = mousemove;
document.onselectstart = rfalse;</script></body></html>

解决方案 »

  1.   

    上面的,我就是想要效果呀!
    你有么?发过来看看哈.谢谢了.
    [email protected]
      

  2.   

    嘿嘿，我想这个应该不是一个很难的效果吧？无非是利用CSS的display属性罢了。只是页面有时候后会很复杂。
      

  3.   

    我自己写了一个仿Windows窗口...
    如果要做到LZ说的那些...一点也不难...
      

  4.   

    去年写的一个.NET控件,没有126的漂亮,功能是一样的,去年CSS功底很差,仅供参考
    --------------------------------------------------<input type="button" onclick="switchTab('tab1','新增Tab','','http://www.csdn.net');" value="切换到CSDN"><style>
    .normalTd{cursor:hand;border-right: 1px solid RGB(128,128,128);border-bottom: 1px solid RGB(128,128,128); border-top: 1px solid RGB(128,128,128); background-color: RGB(169,169,169); color: RGB(105,105,105)}
    .selectedTd{cursor:default;border-right: 1px solid RGB(128,128,128); border-top: 1px solid RGB(128,128,128); background-color: RGB(245,245,245);color:RGB(0,0,0);font-weight:bold}
    .blankTd{border-bottom: 1px solid RGB(128,128,128)}
    .contentTd{border-left:1px solid RGB(128,128,128); border-right:1px solid RGB(128,128,128); border-bottom:1px solid RGB(128,128,128)}
    .bottomTd{border-left:1px solid RGB(128,128,128); border-right:1px solid RGB(128,128,128); border-bottom:1px solid RGB(128,128,128)}
    .closeStyle{border: 1px solid #08246B; background-color: #D6D7DE;cursor:hand}
    .tdFont{font-family: 宋体; font-size: 9pt};
    </style>
    <table id="WebMDI1" height="100%" cellpadding="0" cellspacing="0" style="height:464px;width:576px;">
    <tr>
    <td valign="Top"><table id="WebMDI1_mainTable" class="tdFont" cellspacing="0" cellpadding="0" onselectstart="event.returnValue=false;" border="0" style="height:100%;width:100%;border-collapse:collapse;border-collapse:;">
    <tr style="height:22px;">
    <td id="WebMDI1_mainTd"><div id="WebMDI1_tabDiv" style="position:absolute; top: 0px; left: 0px; clip: rect(0 340 22 0); height: 22px;width: 100%;">
    <table class="tdFont" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;">
    <tr id="WebMDI1_RomensTabTr" style="height:22px;">
    <td id="WebMDI1_RomensTabHome" class="selectedTd" align="Center" onclick="RomensShowHideTab(this);" style="border-left:1px solid RGB(128,128,128);"><span style='width:100px' title='主　　页'>主　　页</span></td>
    </tr>
    </table>
    </div></td><td class="blankTd" align="Right" style="width:100%;"><table class="tdFont" cellspacing="0" cellpadding="0" border="0" style="height:18px;width:54px;border-collapse:collapse;">
    <tr>
    <td align="Center" valign="Bottom" onMouseDown="movover();movstar(10,2);" onMouseOut="this.className='';movover();" onmouseover="this.className='closeStyle';" onmouseup="movover();" onclick="return false;" style="font-weight:bold;width:18px;">&lt;</td><td align="Center" valign="Bottom" onMouseDown="movover();movstar(-10,2);" onMouseOut="this.className='';movover();" onmouseover="this.className='closeStyle';" onmouseup="movover();" onclick="return false;" style="font-weight:bold;width:18px;">&gt;</td><td align="Center" valign="Bottom" onmouseover="this.className='closeStyle';" onmouseout="this.className='';" onclick="closeTab();" style="font-weight:bold;width:18px;">×</td>
    </tr>
    </table></td>
    </tr><tr>
    <td class="contentTd" colspan="2" style="width:100%;"><div id="WebMDI1_RomensContent" style="height:100%;width:100%;">
    <iframe width='100%' height='100%' id='RomensFrame' src='http://www.hao123.com' frameborder='0' target="_blank"></iframe>
    </div></td>
    </tr>
    </table></td>
    </tr>
    </table></P>
      

  5.   

    js脚本
    ------------------
    <script language='javascript'>
    var tabDiv=document.all.item('WebMDI1_tabDiv');
    var mainTd=document.all.item('WebMDI1_mainTd');
    var RomensTabHome=document.all.item('WebMDI1_RomensTabHome');
    var RomensTabTr=document.all.item('WebMDI1_RomensTabTr');
    var RomensContent=document.all.item('WebMDI1_RomensContent');
    var mainTable=document.all.item('WebMDI1_mainTable');setTabDivLocation();var layerW=mainTd.offsetParent.offsetWidth-mainTd.offsetWidth-60; //设定显示区域的宽
    tabDiv.style.clip='rect(0 ' + layerW + ' 22 0)';
    var layerH=parseInt(tabDiv.style.height);
    var layerL=parseInt(tabDiv.style.left);
    var layerT=parseInt(tabDiv.style.top);
    var step=0; //scroll value
    var movx; //移动位置var selectedTab=RomensTabHome; //已选择的Tab
    var selectedFrame=document.getElementById('RomensFrame'); //已选择的Frame
    document.body.onresize=function(){
    layerW=mainTd.offsetParent.offsetWidth-mainTd.offsetWidth-60;
    var clipArr=getClip();
    var offsetwidth=clipArr[3].substring(0,clipArr[3].indexOf('px'));
    if(tabDiv.offsetParent.offsetWidth-tabDiv.offsetWidth<layerW){
    setTabDivLocation();
    tabDiv.style.clip='rect(0 ' + layerW + ' 22 0)';
    step=0;
    }
    else{
    tabDiv.style.clip='rect(' + clipArr[0] + ' ' + (parseInt(layerW) + parseInt(offsetwidth)) + 'px ' + clipArr[2] + ' ' + offsetwidth + ')';
    }
    }mainTable.onresize=function(){
    var clipArr=getClip();
    var offsetwidth=clipArr[3].substring(0,clipArr[3].indexOf('px'));
    tabDiv.style.left=getAbsolutePos(mainTable).x-offsetwidth;
    tabDiv.style.top=getAbsolutePos(mainTable).y;
    };
    function getClip(){
    var clipStr=tabDiv.style.clip;
    clipStr=clipStr.substring(clipStr.indexOf('rect(') + 5,clipStr.indexOf(')'))
    var clipArr=clipStr.split(' ');
    return clipArr;
    }function movstar(a,time){
    if (a < 0 && step>-parseInt(tabDiv.scrollWidth)+layerW||a>0&&step<0) 
    mov(a);
    movx=setTimeout('movstar(' + a + ',' + time + ')', time);
    }function movover(){
    event.returnValue=false;
    if(typeof(movx)!='undefined');
    clearTimeout(movx);
    }
    function mov(a){
    tabDiv.style.left = (step+=a) + layerL;
    clipL=0-step;
    clipR=layerW-step;
    clipB=layerH;
    clipT=0;
    tabDiv.style.clip='rect(' + clipT + ' ' + clipR + ' ' + clipB + ' ' + clipL + ')'; 
    }function RomensShowHideTab(tab){
    selectedTab.className='normalTd';
    tab.className='selectedTd';
    var tabOffsetLeft=getAbsolutePos(tab).x;
    tabOffsetLeft-=getAbsolutePos(mainTd).x;
    selectedFrame.style.display='none';
    var frame=document.getElementById('RomensFrame' + tab.accessKey);
    frame.style.display='';
    selectedFrame=frame;
    selectedTab=tab; if(tabOffsetLeft<0){
    mov(-tabOffsetLeft + (tab.cellIndex==0?0:1));
    }
    else if(tabOffsetLeft + tab.offsetWidth>layerW){
    mov(layerW-tabOffsetLeft-tab.offsetWidth);
    }

    }function showHome(){
    RomensShowHideTab(RomensTabTr.cells[0])
    }function getAbsolutePos(el) {
    var r = { x: el.offsetLeft, y: el.offsetTop };
    if (el.offsetParent) {
    var tmp = getAbsolutePos(el.offsetParent);
    r.x += tmp.x;
    r.y += tmp.y;
    }
    return r;
    }
    function setTabDivLocation(){
    tabDiv.style.top=getAbsolutePos(mainTable).y;
    tabDiv.style.left=getAbsolutePos(mainTable).x;
    }function createTab(key,text,tabWidth,url){
    newTd=RomensTabTr.insertCell(RomensTabTr.cells.length);
    if(tabWidth==null || tabWidth==0)
    newTd.width=100;
    else
    newTd.width=tabWidth;
    newTd.id='RomensTab' + (RomensTabTr.cells.length-1);
    newTd.className='normalTd';
    newTd.align='center';
    newTd.accessKey=key;
    var tdInnerHtml="<span style='width:" + newTd.width + "px' title='" + text + "'>";
    if(newTd.width-text.length*14<14)
    tdInnerHtml+=text.substring(0,(newTd.width/14)-1) + '...';
    else
    tdInnerHtml+=text;
    tdInnerHtml += '</span>';
    newTd.innerHTML=tdInnerHtml;

    newTd.onclick=function(){RomensShowHideTab(this,this.cellIndex);}
    newTd.ondblclick=function(){closeTab();}

    newFrame=document.createElement('iframe');
    newFrame.width='100%';
    newFrame.height='100%';
    newFrame.frameBorder=0;
    newFrame.id='RomensFrame' + key;
    newFrame.src=url;
    RomensContent.appendChild(newFrame);
    }function switchTab(key,text,width,url){
    var tabIndex=-1;
    for(i=0;i<RomensTabTr.cells.length;i++){
    if(RomensTabTr.cells[i].accessKey==key){
    tabIndex=i;
    break;
    }
    }
    if(tabIndex==-1){
    createTab(key,text,width,url);
    tabIndex=RomensTabTr.cells.length-1;
    }
    RomensShowHideTab(RomensTabTr.cells[tabIndex]);
    }function closeTab(){
    if(selectedTab!=RomensTabHome){
    var tabIndex=selectedTab.cellIndex-1;
    RomensTabTr.removeChild(selectedTab);
    RomensContent.removeChild(selectedFrame);
    RomensShowHideTab(RomensTabTr.cells[tabIndex]);
    }
    }
    </script>