仿Visual Studio面板伸缩效果

稿源：互联网 2022-06-17 02:30:00 点击： 21833 撤稿纠错

仿Visual Studio面板伸缩效果，有嵌入、浮起、折回三个效果。

以下讨论的是和js相关的仿Visual Studio面板伸缩效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿Visual Studio面板伸缩效果，alixixi.com整理收集。</title>
<style type="text/css">
html,body,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,caption,th,td,img,form,fieldset,legend,input,label,button,textarea { margin:0; padding:0; }
html,body { font:12px/16px arial,Simsun,sans-serif; color:#333; text-align:center; background:#fff; overflow:hidden; }
body {
 scrollbar-face-color:#78c9ef;
 scrollbar-shadow-color:#ccf;
 scrollbar-highlight-color:#fff;
 scrollbar-3dlight-color:#2eb4f3;
 scrollbar-darkshadow-color:#fff;
 scrollbar-track-color:#e0f1fc;
 scrollbar-arrow-color:#fff;
}
ul { list-style:none; }
#layout_header,
#layout_content,
#layout_footer { width:1024px; margin:0 auto; }
#layout_header { height:91px; }
#layout_content { position:relative; overflow:hidden; }
#layout_footer { height:28px; background:#efefef url(http://zbw123.com/webmaster/vs/images/bg_footer.png) no-repeat 100%; }
#layout_footer span { display:block; height:100%; line-height:28px; vertical-align:middle; background:url(http://zbw123.com/webmaster/vs/images/bg_footer.png) no-repeat 0; }
#layout_header {
 border-bottom:2px solid #2eb4f3;
 background:url(http://zbw123.com/webmaster/vs/images/bg_banner.png) no-repeat 100%;
}
#layout_header h1 {
 width:500px;
 height:100%;
 text-indent:-9999px;
 background:url(http://zbw123.com/webmaster/vs/images/logo.png) no-repeat;
 overflow:hidden;
 float:left;
}
.layoutInner {
 height:100%;
 overflow:auto;
}
.toolsTags,.toolsTags2 {
 position:absolute;
 left:0;
 border-right:1px solid #2eb4f3;
 background:#fff;
 z-index:9;
}
.toolsTags {
 width:20px;
 height:100%;
}
.toolsTags2 {
 width:auto;
 height:20px;
 bottom:0;
 _bottom:-1px;
}
.toolsTags li {
 height:79px;
 padding-top:10px;
 line-height:120%;
 text-align:center;
 cursor:pointer;
}
.toolsTags li,
.toolsTags li.now {
 padding-left:2px;
 font-weight:700;
 background:url(http://zbw123.com/webmaster/vs/images/un_tags.png);
}
.toolsTags li {
 color:#999;
 background-position:0 -89px;
}
.toolsTags li.now {
 margin-left:0;
 color:#fff;
 background-position:0 0;
}
.toolsTags2 li,
.toolsTags2 li.now {
 font-weight:700;
 line-height:20px;
 vertical-align:middle;
 background:url(http://zbw123.com/webmaster/vs/images/un_tags.png);
}
.toolsTags2 li {
 width:89px;
 height:100%;
 color:#fff;
 text-align:center;
 background-position:0 -178px;
 cursor:pointer;
 float:left;
}
.toolsTags2 li.now {
 border-top:0;
 color:#069;
 background-position:-89px -178px;
}
.toolsContent,.toolsContent2 {
 height:100%;
 border:1px solid #2eb4f3;
 border-top:0;
 border-left:0;
 background:#fff;
 filter:alpha(opacity=75);
 opacity:.75;
}
.toolsContent {
 position:absolute;
 top:0;
}
.toolsContent2 {
 border-left:1px solid #2eb4f3;
 border-right:0;
 float:left;
}
.toolsContent .toolsC,
.toolsContent2 .toolsC {
 text-align:left;
 overflow:auto;
 word-break:break-all;
}
.toolsContent .toolsCin { padding:5px; }
.toolsContent2 .toolsCin { padding:5px 5px 24px 5px; }
.toolsTitle {
 height:24px;
 text-indent:8px;
 font-weight:700;
 color:#006599;
 line-height:24px;
 text-align:left;
 vertical-align:middle;
 background:url(http://zbw123.com/webmaster/vs/images/bg_toolsTitle.png) repeat-x;
}
.toolsTitle a {
 display:block;
 width:16px;
 height:16px;
 margin:3px;
 text-indent:-999px;
 background:url(http://zbw123.com/webmaster/vs/images/un_float_ctrl.png);
 overflow:hidden;
 float:right;
}
.toolsTitle a.clickFold {
 background-position:0 -32px;
}
.toolsTitle a.clickTo {
 background-position:0 0;
}
.toolsTitle a.clickTo2 {
 background-position:0 -16px;
}
.toolsBar {
 position:absolute;
 top:0;
 width:1px;
 height:100%;
 background:#2eb4f3;
 cursor:col-resize;
 -moz-user-select:none;
 z-index:8;
}
</style>
<script>
/*
* By ximenchuixue, QQ:149561420, email:sabesabe3314@163.com *
*/
var ximen = {
 $:function(o){
  return document.getElementById(o);
 },
 getChild:function(o,s) {
  var x;
  if(s == "first") { x = o.firstChild; while(x.nodeType != 1) { x = x.nextSibling; } }
  else { x = o.lastChild; while(x.nodeType != 1) { x = x.previousSibling; } }
  return x;
 },
 isIn:0,
 ini:[
  20,              //0,tagsWidth
  1024,             //1,maxWidth
  '-302px',           //2,defaultLeft
  'toolsContent',        //3,
  'toolsContent2',       //4,
  'none',            //5,
  'block',           //6,
  'right',           //7,
  'clickTo2',          //8,
  'clickTo',          //9,
  'inline',           //10,
  'auto',            //11,
  'now',            //12,
  'toolsTags',         //13,
  'toolsTags2',         //14,
  'layoutInner',        //15,
  'out',            //16,
  'in',             //17,
  'clickTo',          //18,
  'clickFold',         //19,
  '嵌入',            //20,
  '浮起',            //21,
  24,              //22,
  'layout_header',       //23,
  'layout_content',       //24,
  'layout_footer',       //25,
  512,             //26,
  300,             //27
 ]
};
/*op：浮动层容器；oc：右侧主内容；maxR：往右拖拽最大位移；maxL：往左拖拽最大位移；*/
ximen.drag = function(op,oc,maxR,maxL) {
 var par = op.parentNode,
  parHeight = par.offsetHeight,
  parLeft = par.offsetLeft,
  o = ximen.getChild(op,'first'),    //o：拖拽线条；
  oLast = ximen.getChild(op,'last'),  //面板显示内容区；
  mouseDown = function(e){
   var e = e || window.event,
    toolsContent = op,
    layoutInner = ximen.$(oc),
    mouseMove = function(e){
     var e = e || window.event,x = ximen.ini[0];
     if(toolsContent.className == ximen.ini[4]) {
      x = 0;
      e.clientX - x - parLeft >= maxR ? o.style.left = maxR + "px" : e.clientX - x - parLeft <= maxL ? o.style.left = maxL + "px" : o.style.left = e.clientX - x - parLeft + "px";
      e.clientX - x - parLeft >= maxR ? op.style.width = maxR + "px" : e.clientX - x - parLeft <= maxL ? op.style.width = maxL + "px" : op.style.width = e.clientX - x - parLeft + "px";
      layoutInner.style.width = ximen.ini[1] - toolsContent.offsetWidth + "px";
     }
     e.clientX - x - parLeft >= maxR ? o.style.left = maxR + "px" : e.clientX - x - parLeft <= maxL ? o.style.left = maxL + "px" : o.style.left = e.clientX - x - parLeft + "px";
     e.clientX - x - parLeft >= maxR ? op.style.width = maxR + "px" : e.clientX - x - parLeft <= maxL ? op.style.width = maxL + "px" : op.style.width = e.clientX - x - parLeft + "px";
    };
   if(o.setCapture){ o.setCapture(); }
   document.onmousemove = function(event) { mouseMove(event); }
   document.onmouseup = function() {
    if(o.releaseCapture){ o.releaseCapture(); }
    document.onmousemove = null;
   }
  };
 op.style.width = maxL + "px";
 op.style.height = parHeight - 1 + "px";
 oLast.style.height = parHeight - ximen.ini[22] - 1 + "px";
 o.style.left = maxL + "px";
 o.onmousedown = function(event) { mouseDown(event); }
}
ximen.layoutTo = function(o,oc,s,sClickTo,sClickFold) {
 var toolsContent = ximen.$(o),
  toolsTags = ximen.$(ximen.ini[13]),
  layoutInner = ximen.$(oc),
  clickTo = ximen.$(sClickTo),
  clickFold = ximen.$(sClickFold),
  sArr,
  sIn = [
   ximen.ini[4],
   ximen.ini[14],
   ximen.ini[1] - toolsContent.offsetWidth + 'px',
   ximen.ini[7],
   ximen.ini[8],
   function(){ximen.layoutTo(o,oc,ximen.ini[16],sClickTo,sClickFold)},
   ximen.ini[5],
   1,
   ximen.ini[2],
   ximen.ini[21]
  ],
  sOut = [
   ximen.ini[3],
   ximen.ini[13],
   ximen.ini[11],
   ximen.ini[5],
   ximen.ini[9],
   function(){ximen.layoutTo(o,oc,ximen.ini[17],sClickTo,sClickFold)},
   ximen.ini[10],
   0,
   ximen.ini[0] + 'px',
   ximen.ini[20]
  ];
 sArr = (s == ximen.ini[17]) ? sIn : sOut;
 toolsContent.className = sArr[0];
 toolsContent.style.left = sArr[8];
 toolsTags.className = sArr[1];
 layoutInner.style.width = sArr[2];
 layoutInner.style.styleFloat = sArr[3];
 layoutInner.style.cssFloat = sArr[3];
 clickTo.className = sArr[4];
 clickTo.title = sArr[9];
 clickTo.onclick = sArr[5];
 clickFold.style.display = sArr[6];
 ximen.isIn = sArr[7];
}
ximen.layoutFO = function(o,s) {
 var toolsContent = ximen.$(o),
  toolsContentWidth = toolsContent.offsetWidth,
  i = 40;
 if(s == 'fold') {
  toolsContent.aWhile = setInterval(function(){
   if(parseInt(toolsContent.style.left) <= -toolsContentWidth) {
    toolsContent.style.left = - toolsContentWidth + 'px';
    clearInterval(toolsContent.aWhile);
   }
   toolsContent.style.left = toolsContent.offsetLeft - i + 'px';
   i *= 1.1;
  },10);
 }
 else {
  if(parseInt(toolsContent.style.left) < ximen.ini[0]) {
   toolsContent.aWhile = setInterval(function(){
    if(parseInt(toolsContent.style.left) >= -ximen.ini[0]*3) {
     clearInterval(toolsContent.aWhile);
     setTimeout(function(){toolsContent.style.left = ximen.ini[0] + 'px';},1);
    }
    toolsContent.style.left = toolsContent.offsetLeft + i + 'px';
   },1);
  }
 }
}
ximen.setTags = function() {
 var toolsTags = ximen.$(ximen.ini[13]),
  lis = toolsTags.getElementsByTagName('li'),
  lisLen = lis.length,
  arrEle = [
   ximen.ini[3],
   ximen.ini[15],
   ximen.ini[18],
   ximen.ini[19]
  ],
  arr,
  arr1 = [
   arrEle[0],
   ximen.ini[5],
   '0',
   function(k){ return ximen.ini[11]; },
   ximen.ini[5],
   ximen.ini[5],
   ximen.ini[5],
   2,
   ximen.ini[9],
   ximen.ini[10],
   ximen.ini[17],
   1,
   ximen.ini[20]
  ],
  arr2 = [
   ximen.ini[4],
   ximen.ini[6],
   ximen.ini[2],
   function(j){ return ximen.ini[1] - ximen.$(arrEle[0] + (j + 1)).offsetWidth + 'px'; },
   ximen.ini[7],
   ximen.ini[7],
   ximen.ini[6],
   3,
   ximen.ini[8],
   ximen.ini[5],
   ximen.ini[16],
   0,
   ximen.ini[21]
  ],
  toset = function(n,a) {
   ximen.$(arrEle[0] + (n + 1)).className = a[0];
   ximen.$(arrEle[0] + (n + 1)).style.display = a[1];
   ximen.$(arrEle[0] + (n + 1)).style.left = a[2];
   ximen.$(arrEle[1] + (n + 1)).style.width = a[3](n);
   ximen.$(arrEle[1] + (n + 1)).style.styleFloat = a[4];
   ximen.$(arrEle[1] + (n + 1)).style.cssFloat = a[5];
   ximen.$(arrEle[1] + (n + 1)).style.display = a[6];
   ximen.$(arrEle[1] + (n + 1)).style.zIndex = a[7];
   ximen.$(arrEle[2] + (n + 1)).className = a[8];
   ximen.$(arrEle[2] + (n + 1)).title = a[12];
   ximen.$(arrEle[3] + (n + 1)).style.display = a[9];
   (function(x) {
    ximen.$(arrEle[2] + x).onclick = function(){
     ximen.layoutTo(arrEle[0] + x,arrEle[1] + x,a[10],arrEle[2] + x,arrEle[3] + x);
     ximen.isIn = a[11];
    };
   })(n + 1);
  };
 for(var i=0;i<lisLen;i++) {
  (function(j) {
   lis[j].onmouseover = function(){
    if(ximen.isIn == 0) {      //如果面板还没有钉入，下同
     if(parseInt(ximen.$(ximen.ini[3] + (j + 1)).style.left) < ximen.ini[0]) {
      for(var k=0;k<lisLen;k++) {
       ximen.$(ximen.ini[3] + (k + 1)).style.zIndex = 4;
       ximen.$(ximen.ini[3] + (k + 1)).style.left = ximen.ini[2];
       clearInterval(ximen.$(ximen.ini[3] + (k + 1)).aWhile);
       ximen.$(ximen.ini[3] + (k + 1)).style.display = ximen.ini[5];
       ximen.$(ximen.ini[15] + (k + 1)).style.display = ximen.ini[5];
       ximen.$(ximen.ini[15] + (k + 1)).style.zIndex = 2;
       lis[k].className = '';
      }
      ximen.$(ximen.ini[3] + (j + 1)).style.zIndex = 5;
      ximen.layoutFO(ximen.ini[3] + (j + 1),'open');
      ximen.$(ximen.ini[3] + (j + 1)).style.display = ximen.ini[6];
      ximen.$(ximen.ini[15] + (j + 1)).style.display = ximen.ini[6];
      ximen.$(ximen.ini[15] + (j + 1)).style.zIndex = 3;
      this.className = ximen.ini[12];
     }
    }
    else {
     for(var k=0;k<lisLen;k++) {
      toset(k,arr1);
      lis[k].className = '';
     }
     toset(j,arr2);
     this.className = ximen.ini[12];
    }
   }
  })(i);
  ximen.drag(ximen.$(ximen.ini[3] + (i + 1)),arrEle[1] + (i + 1),ximen.ini[26],ximen.ini[27]);
 }
}
ximen.setLayout = function() {
 var layout_header = ximen.$(ximen.ini[23]),
  layout_content = ximen.$(ximen.ini[24]),
  layout_footer = ximen.$(ximen.ini[25]),
  toolsContent1 = ximen.$(ximen.ini[3] + 1),
  toolsContent2 = ximen.$(ximen.ini[3] + 2),
  toolsContent3 = ximen.$(ximen.ini[3] + 3),
  setHeight = function() {
   var newHeight = document.documentElement.clientHeight - layout_header.offsetHeight - layout_footer.offsetHeight;
   layout_content.style.height = newHeight + 'px';
   toolsContent1.style.height = toolsContent2.style.height = toolsContent3.style.height = newHeight - 1 + "px";
   ximen.getChild(toolsContent1,'last').style.height = ximen.getChild(toolsContent2,'last').style.height = ximen.getChild(toolsContent3,'last').style.height = newHeight - ximen.ini[22] - 1 + "px";
  };
 setHeight();
 ximen.setTags();
 window.onresize = setHeight;
}
window.onload = function() { ximen.setLayout(); }
</script>
</head>
<body>
<div id="layout_header">
 <h1>某某某管理平台</h1>
</div>
<div id="layout_content">
 <ul id="toolsTags" class="toolsTags">
  <li class="now">检索目录一</li>
  <li>检索目录二</li>
  <li>检索目录三</li>
 </ul>
 <div id="toolsContent1" class="toolsContent" style="left:20px;">
  <div class="toolsBar"></div>
  <div class="toolsTitle"><a href="#;" id="clickFold1" title="折回" class="clickFold" onclick="ximen.layoutFO('toolsContent1','fold');">折回</a> <a href="#;" id="clickTo1" title="嵌入" class="clickTo" onclick="ximen.layoutTo('toolsContent1','layoutInner1','in','clickTo1','clickFold1');">嵌入</a> 检索目录一</div>
  <div class="toolsC">
   <div class="toolsCin">
    <img src="http://zbw123.com/webmaster/vs/images/zzz_tree.png" />
   </div>
  </div>
 </div>
 <div id="toolsContent2" class="toolsContent" style="left:-302px;">
  <div class="toolsBar"></div>
  <div class="toolsTitle"><a href="#;" id="clickFold2" title="折回" class="clickFold" onclick="ximen.layoutFO('toolsContent2','fold');">折回</a> <a href="#;" id="clickTo2" title="嵌入" class="clickTo" onclick="ximen.layoutTo('toolsContent2','layoutInner2','in','clickTo2','clickFold2');">嵌入</a> 检索目录二</div>
  <div class="toolsC">
   <div class="toolsCin">
    <img src="http://zbw123.com/webmaster/vs/images/zzz_tree.png" />
   </div>
  </div>
 </div>
 <div id="toolsContent3" class="toolsContent" style="left:-302px;">
  <div class="toolsBar"></div>
  <div class="toolsTitle"><a href="#;" id="clickFold3" title="折回" class="clickFold" onclick="ximen.layoutFO('toolsContent3','fold');">折回</a> <a href="#;" id="clickTo3" title="嵌入" class="clickTo" onclick="ximen.layoutTo('toolsContent3','layoutInner3','in','clickTo3','clickFold3');">嵌入</a> 检索目录三</div>
  <div class="toolsC">
   <div class="toolsCin">
    <img src="http://zbw123.com/webmaster/vs/images/zzz_tree.png" />
   </div>
  </div>
 </div>
 <div id="layoutInner1" class="layoutInner">
  <table style="width:100%;">
   <tr>
    <td>11111111</td>
    <td>11111111</td>
    <td>11111111</td>
    <td>
     <div style="width:50%; padding:10px; border:1px dashed #333; text-align:left; background:#eee;">
      <h2>仿Visual Studio面板 beta</h2>
      <ol style="padding:10px 10px 10px 20px;">
       <li>支持鼠标拖拽面板右侧改变面板宽度</li>
       <li>限制面板最小宽度和最大宽度</li>
       <li>点面板右上角按钮实现“嵌入”、“浮起”、“折回”功能</li>
       <li>面板“浮起”时，tag切换面板动态折回与展开</li>
       <li>面板“嵌入”时，面板嵌入页面中，tag区落到下方</li>
      </ol>
     </div>
    </td>
   </tr>
   <tr>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td> </td>
   </tr>
   <tr>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td> </td>
   </tr>
  </table>
 </div>
 <div id="layoutInner2" class="layoutInner">
  <table style="width:100%;">
   <tr>
    <td>222222</td>
    <td>222222</td>
    <td>222222</td>
    <td>222222</td>
   </tr>
   <tr>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
   </tr>
   <tr>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
   </tr>
  </table>
 </div>
 <div id="layoutInner3" class="layoutInner">
  <table style="width:100%;">
   <tr>
    <td>333333</td>
    <td>333333</td>
    <td>333333</td>
    <td>333333</td>
   </tr>
   <tr>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
   </tr>
   <tr>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
    <td>fdsfs</td>
   </tr>
  </table>
 </div>
</div>
<div id="layout_footer">告诉你一个应有尽有的网页特效网址：<a href="http://js.alixixi.com">http://js.alixixi.com</a></div>
</body>
</html>

关于仿Visual Studio面板伸缩效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2009111459021.shtml方便下次再访问哦。

·上一篇： 常用导航菜单
·下一篇： 漂亮的烟花特效

仿Visual Studio面板伸缩效果

文章分类LIST >>返回首页

最新游戏

最新新闻