闲来无事，搞了个页面的分屏效果，先来看下效果：

出于可自定义宽高的目的,屏幕分块由CSS控制，由js控制估计等分模块效果一般.

程序相关说明：

HTML结构：

  1. <div class="header">
  2.             header
  3. </div>
  4.     <div class="container" id="displayArea">
  5.             <!-- 分屏内容渲染区域 -->
  6.     </div>
  7. <div class="footer">
  8.  <!--省略其他代码-->
  9. </div>

js调用：

  1. //分屏数据
  2.             var iframes = [
  3.                     {
  4.                         id:'frames_1',
  5.                         frameName:'百度一下',
  6.                         src:'http://www.baidu.com'
  7.                     },
  8.                     {
  9.                         id:'frames_1',
  10.                         frameName:'百度地图',
  11.                         src:'http://map.baidu.com'
  12.                     },
  13.                     {
  14.                         id:'frames_1',
  15.                         frameName:'百度下',
  16.                         src:'http://www.baidu.com'
  17.                     },
  18.                     {
  19.                         id:'frames_1',
  20.                         frameName:'百度视频',
  21.                         src:'http://v.baidu.com'
  22.                     },
  23.                     {
  24.                         id:'frames_1',
  25.                         frameName:'百度新闻2',
  26.                         src:'http://news.baidu.com'
  27.                     },
  28.                     {
  29.                         id:'frames_1',
  30.                         frameName:'test6',
  31.                         src:'6.html'
  32.                     },
  33.                     {
  34.                         id:'frames_1',
  35.                         frameName:'百度新闻',
  36.                         src:'http://news.baidu.com'
  37.                     },
  38.                     {
  39.                         id:'frames_1',
  40.                         frameName:'88888',
  41.                         src:'6.html'
  42.                     },
  43.                     {
  44.                         id:'frames_1',
  45.                         frameName:'百度更多',
  46.                         src:'http://www.baidu.com/more/'
  47.                     }
  48.                 ];
  49.             //自适应屏幕
  50.             window.onload = function(){
  51.                 Panel.resize();
  52.             }
  53.             window.onresize = function(){
  54.                 Panel.resize();
  55.             }
  56.  
  57.             //初始化分屏
  58.             var splitScreen = new splitScreen($('#displayArea'),iframes);
  59.  
  60.             //监听removeSettingCls自定义事件
  61.             splitScreen._on('removeSettingCls',function(){
  62.                 splitScreen.toggleTopbar(function(){
  63.                         $('.ulTab li[data-fp="setting"]').removeClass('currentLi');
  64.                     });
  65.             });
  66.             //分屏切换
  67.             function changeModel(obj){
  68.                 var fpmodel = $(obj).attr('data-fp');
  69.                 if(fpmodel !="setting"){
  70.                     splitScreen.screenMode(fpmodel,function(){
  71.                         $(obj).addClass('currentLi').siblings().removeClass('currentLi');
  72.                     });
  73.                 }else{
  74.                     splitScreen.toggleTopbar(function(){
  75.                         $(obj).toggleClass('currentLi');
  76.                     });
  77.                 }
  78.             }

splitScreen.js相关代码说明：

1.定义一个类

  1. var splitScreen = function(elem, options) {
  2.     this.elem = elem; //分屏模块渲染区域元素
  3.     this.options = options;//分屏链接数据
  4.     this.initialize.apply(this); //初始化初始化分屏
  5. }

2.prototype主要方法

  1. splitScreen.prototype= {
  2.         initialize: function() {},//初始化方法
  3.         screenMode:  function(){},//分屏方法
  4.         renderPanel:function(){},//渲染分屏DOM
  5.         bindPanel:function(){} //事件监听
     
  6. };

3.screenMode()方法说明：

主要是根据不同的分屏切换不同的Class，通过CSS类去控制分屏布局.这样写的好处应该是可以自定义布局的宽高大小，但是比较繁琐。如下：

  1. switch (Number(mode)) {
  2.             case 1:
  3.                 this.data = [
  4.                     ['fp-1-1']
  5.                 ];
  6.                 this.defaultShow = [0];
  7.                 break;
  8.             case 2:
  9.                 this.data = [
  10.                     ['fp-2-1'],
  11.                     ['fp-2-2']
  12.                 ];
  13.                 this.defaultShow = [1, 2];
  14.                 break;
  15.             case 3:
  16.                 this.data = [
  17.                     ['fp-3-1'],
  18.                     ['fp-3-2', 'fp-3-3']
  19.                 ];
  20.                 this.defaultShow = [1, 2, 3];
  21.                 break;
  22.             case 4:
  23.                 this.data = [
  24.                     ['fp-4-1', 'fp-4-2'],
  25.                     ['fp-4-3', 'fp-4-4']
  26.                 ];
  27.                 this.defaultShow = [4, 1, 2, 3];
  28.                 break;
  29.             case 5:
  30.                 this.data = [
  31.                     ['fp-5-1'],
  32.                     ['fp-5-2'],
  33.                     ['fp-5-3', 'fp-5-4', 'fp-5-5']
  34.                 ];
  35.                 this.defaultShow = [4, 5, 1, 2, 3];
  36.                 break;
  37.             case 6:
  38.                 this.data = [
  39.                     ['fp-6-1'],
  40.                     ['fp-6-2', 'fp-6-3'],
  41.                     ['fp-6-4', 'fp-6-5', 'fp-6-6']
  42.                 ];
  43.                 this.defaultShow = [4, 5, 6, 7, 8, 8];
  44.                 break;
  45.             default:
  46.                 alert("不支持" + mode + "分屏");
  47.         }

CSS布局控制：

  1. .fp-box{position:absolute;border:1px solid #000;background:#fff;}
  2.             .fp-1-1{top:;left:;right:;bottom:;}
  3.             .fp-2-1{top:;left:;right: 300px;bottom:;}
  4.             .fp-2-2{top:;right: 0px;bottom:; width: 300px;}
  5.             .fp-3-1{top:;left:;right: 300px;bottom:;}
  6.             .fp-3-2{top:;right:;width:300px;height:50%;}
  7.             .fp-3-3{top:50%;right:;bottom:;width:300px;}
  8.  
  9.             .fp-4-1{top:;left:;right: 50%;height:50%;}
  10.             .fp-4-2{top:50%;left:;right: 50%;bottom:;}
  11.             .fp-4-3{top:;right:;width:50%;height:50%;}
  12.             .fp-4-4{top:50%;right:;bottom:;width:50%;}
  13.  
  14.             .fp-5-1{top:;left:;right: 300px;bottom: 252px;}
  15.             .fp-5-2{top:0px;width:300px;right:;bottom: 252px;}
  16.             .fp-5-3{height: 250px;left:;width:30%;bottom:;}
  17.             .fp-5-4{height: 250px;left:30%;width:30%;bottom:;}
  18.             .fp-5-5{height: 250px;left:60%;bottom:;right:;}
  19.  
  20.             .fp-6-1{top:;left:;right: 300px;bottom: 252px;}
  21.             .fp-6-2{top:;width:300px;right:;height:250px;}
  22.             .fp-6-3{top:250px;width:300px;right:;bottom: 252px;}
  23.             .fp-6-4{height: 250px;left:;width:30%;bottom:;}
  24.             .fp-6-5{height: 250px;left:30%;width:30%;bottom:;}
  25.             .fp-6-6{height: 250px;left:60%;bottom:;right:;}

完整代码：

HTML：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>fp version2</title>
  6.  
  7.     <style type="text/css">
  8.             *{margin:0;padding:0;}
  9.             .header{background:#ddd;height:120px;}
  10.             .footerCon{width:320px;margin: 0 auto;}
  11.             .footerCon .dropDiv{background: #fff; margin: 10px 0 0 0; float: left;}
  12.             .footerCon .fpmodel{display: none;float: right;width:160px;}
  13.             .footerCon .saveBtn{margin: 10px 0 0 10px; padding: 2px 10px;border:1px solid #CCC;cursor: pointer;}
  14.             .clearFix:after{content:’’;display:block;height:0;overflow:hidden;clear:both;}
  15.             .footer { height: 40px; background: #ABABAB; position: fixed; bottom: 0px; width: 100%; }
  16.             .footer .ulTab {list-style-type: none;width:200px;overflow: hidden;float: left;}
  17.             .footer .ulTab li{float: left;height:16px;padding: 12px 15px;cursor: pointer;}
  18.             .footer .ulTab li.currentLi{background: #fff;}
  19.  
  20.             .tabImg{width:18px;height: 14px;border:1px solid #707070;background:#fff;}
  21.             .tabImg td{width: 9px;height: 5px;border:1px solid #707070;}
  22.             .divImg{border-width:2px;height: 12px;}
  23.             .td3Img td{height: 3px;}
  24.             .currentLi .tabImg,.currentLi .tabImg td{border-color:#1e7be4;}
  25.  
  26.             .topbarDiv{position: absolute;left: 0;top:0;right:0;border:1px solid #dedede;z-index: 1;height:25px;padding:3px;background: #61C0FA;display: none;}
  27.             .changeBtn{cursor:pointer; padding: 2px 10px;float: left;}
  28.             .dropDiv,.footer .dropDiv{position: relative;width: 100px;z-index: 100;}
  29.             .dropDiv .curSrc,.footer .dropDiv .curSrc{display: inline-block;height: 20px;line-height: 20px;padding: 0 2px;}
  30.             .dropDiv ul,.footer .dropDiv ul{position: absolute;left: -1px;top:20px;background: #fff;width:100px;border:1px solid #1E7BE4;display: none;}
  31.             .dropDiv ul li,.footer .dropDiv ul li{line-height: 20px;padding: 0 2px;}
  32.             .dropDiv ul li.currentSrc,.footer .dropDiv ul li.currentSrc{background: #1E7BE4;color: #fff;cursor: pointer;}
  33.             .dropDiv ul li:hover,.footer .dropDiv ul li:hover{background:#AEC9F3;color: #fff;cursor: pointer;}
  34.             .optionsWrap{float: right;}
  35.             .optionsWrap a{font-family: 'MicroSoft YaHei';color:#fff;text-decoration:none;float: left;}
  36.             .optionsWrap a:hover{color: #fdd;cursor:pointer;}
  37.             .btnBig{width: 50px;height:30px;text-align: center;}
  38.             .btnSmall{width: 50px;height:30px;text-align: center;}
  39.             .btnCls{width: 50px;height:30px;text-align: center;}
  40.             /*分屏模块布局*/
  41.             .container{position: relative;}
  42.             .fp-box{position:absolute;border:1px solid #000;background:#fff;}
  43.             .fp-1-1{top:0;left:0;right: 0;bottom: 0;}
  44.             .fp-2-1{top:0;left:0;right: 300px;bottom: 0;}
  45.             .fp-2-2{top:0;right: 0px;bottom: 0; width: 300px;}
  46.             .fp-3-1{top:0;left:0;right: 300px;bottom: 0;}
  47.             .fp-3-2{top:0;right: 0;width:300px;height:50%;}
  48.             .fp-3-3{top:50%;right: 0;bottom: 0;width:300px;}
  49.  
  50.             .fp-4-1{top:0;left:0;right: 50%;height:50%;}
  51.             .fp-4-2{top:50%;left:0;right: 50%;bottom: 0;}
  52.             .fp-4-3{top:0;right: 0;width:50%;height:50%;}
  53.             .fp-4-4{top:50%;right: 0;bottom: 0;width:50%;}
  54.  
  55.             .fp-5-1{top:0;left:0;right: 300px;bottom: 252px;}
  56.             .fp-5-2{top:0px;width:300px;right: 0;bottom: 252px;}
  57.             .fp-5-3{height: 250px;left:0;width:30%;bottom: 0;}
  58.             .fp-5-4{height: 250px;left:30%;width:30%;bottom: 0;}
  59.             .fp-5-5{height: 250px;left:60%;bottom: 0;right: 0;}
  60.  
  61.             .fp-6-1{top:0;left:0;right: 300px;bottom: 252px;}
  62.             .fp-6-2{top:0;width:300px;right: 0;height:250px;}
  63.             .fp-6-3{top:250px;width:300px;right: 0;bottom: 252px;}
  64.             .fp-6-4{height: 250px;left:0;width:30%;bottom: 0;}
  65.             .fp-6-5{height: 250px;left:30%;width:30%;bottom: 0;}
  66.             .fp-6-6{height: 250px;left:60%;bottom: 0;right: 0;}
  67.     </style>
  68. </head>
  69. <body>
  70.         <div class="header">
  71.             header
  72.         </div>
  73.         <div class="container" id="displayArea">
  74.             <!-- 分屏内容区 -->
  75.         </div>
  76.         <div class="footer">
  77.         <div class="footerCon clearFix">
  78.             <ul class="ulTab">
  79.                 <li class="currentLi" data-fp ="1" onclick="changeModel(this)">
  80.                     <div class="tabImg divImg"></div>
  81.                 </li>
  82.                 <li data-fp ="3" onclick="changeModel(this)">
  83.                     <table class="tabImg" cellpadding="0" cellspacing="0">
  84.                         <tr>
  85.                             <td rowspan="2"></td>
  86.                             <td></td>
  87.                         </tr>
  88.                         <tr>
  89.                             <td></td>
  90.                         </tr>
  91.                     </table>
  92.                 </li>
  93.                 <li data-fp ="6" onclick="changeModel(this)">
  94.                     <table class="tabImg td3Img" cellpadding="0" cellspacing="0">
  95.                         <tr>
  96.                             <td rowspan="2" colspan="2"></td>
  97.                             <td></td>
  98.                         </tr>
  99.                         <tr>
  100.                             <td></td>
  101.                         </tr>
  102.                         <tr>
  103.                             <td></td>
  104.                             <td></td>
  105.                             <td></td>
  106.                         </tr>
  107.                     </table>
  108.                 </li>
  109.                 <li data-fp ="setting" onclick="changeModel(this)" title="设置">
  110.                     <table class="tabImg td3Img" cellpadding="0" cellspacing="0">
  111.                         <tr>
  112.                             <td rowspan="2" colspan="2"></td>
  113.                             <td></td>
  114.                         </tr>
  115.                         <tr>
  116.                             <td></td>
  117.                         </tr>
  118.                         <tr>
  119.                             <td></td>
  120.                         </tr>
  121.                     </table>
  122.                 </li>
  123.             </ul>
  124.         </div>
  125.     </div>
  126.     <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  127.     <script type="text/javascript" src="js/splitScreen.js"></script>
  128.     <script type="text/javascript">
  129.             //分屏数据
  130.             var iframes = [
  131.                     {
  132.                         id:'frames_1',
  133.                         frameName:'百度一下',
  134.                         src:'http://www.baidu.com'
  135.                     },
  136.                     {
  137.                         id:'frames_1',
  138.                         frameName:'百度地图',
  139.                         src:'http://map.baidu.com'
  140.                     },
  141.                     {
  142.                         id:'frames_1',
  143.                         frameName:'百度下',
  144.                         src:'http://www.baidu.com'
  145.                     },
  146.                     {
  147.                         id:'frames_1',
  148.                         frameName:'百度视频',
  149.                         src:'http://v.baidu.com'
  150.                     },
  151.                     {
  152.                         id:'frames_1',
  153.                         frameName:'百度新闻2',
  154.                         src:'http://news.baidu.com'
  155.                     },
  156.                     {
  157.                         id:'frames_1',
  158.                         frameName:'test6',
  159.                         src:'6.html'
  160.                     },
  161.                     {
  162.                         id:'frames_1',
  163.                         frameName:'百度新闻',
  164.                         src:'http://news.baidu.com'
  165.                     },
  166.                     {
  167.                         id:'frames_1',
  168.                         frameName:'88888',
  169.                         src:'6.html'
  170.                     },
  171.                     {
  172.                         id:'frames_1',
  173.                         frameName:'百度更多',
  174.                         src:'http://www.baidu.com/more/'
  175.                     }
  176.                 ];
  177.             window.onload = function(){
  178.                 Panel.resize();
  179.             }
  180.             window.onresize = function(){
  181.                 Panel.resize();
  182.             }
  183.  
  184.             //初始化分屏
  185.             var splitScreen = new splitScreen($('#displayArea'),iframes);
  186.  
  187.             //监听removeSettingCls自定义事件
  188.             splitScreen._on('removeSettingCls',function(){
  189.                 splitScreen.toggleTopbar(function(){
  190.                         $('.ulTab li[data-fp="setting"]').removeClass('currentLi');
  191.                     });
  192.             });
  193.             //分屏切换
  194.             function changeModel(obj){
  195.                 var fpmodel = $(obj).attr('data-fp');
  196.                 if(fpmodel !="setting"){
  197.                     splitScreen.screenMode(fpmodel,function(){
  198.                         $(obj).addClass('currentLi').siblings().removeClass('currentLi');
  199.                     });
  200.                 }else{
  201.                     splitScreen.toggleTopbar(function(){
  202.                         $(obj).toggleClass('currentLi');
  203.                     });
  204.                 }
  205.             }
  206.     </script>
  207. </body>
  208. </html>

JS：

  1. /**
  2.  * splitScren.js
  3.  * v1.2
  4.  * 2015-5-14
  5.  * by linxia
  6.  **/
  7. var splitScreen = function(elem, options) {
  8.     this.elem = elem;
  9.     this.options = options;
  10.     this.initialize.apply(this);
  11. }
  12.  
  13. splitScreen.prototype = {
  14.     initialize: function() {
  15.         this.handlers = {};
  16.         this.screenMode(1);
  17.     },
  18.     screenMode: function(mode, callback) {
  19.         this.elem.empty();
  20.         this.data = null;
  21.         this.defaultShow = null; //默认展示页面的索引
  22.         switch (Number(mode)) {
  23.             case 1:
  24.                 this.data = [
  25.                     ['fp-1-1']
  26.                 ];
  27.                 this.defaultShow = [0];
  28.                 break;
  29.             case 2:
  30.                 this.data = [
  31.                     ['fp-2-1'],
  32.                     ['fp-2-2']
  33.                 ];
  34.                 this.defaultShow = [1, 2];
  35.                 break;
  36.             case 3:
  37.                 this.data = [
  38.                     ['fp-3-1'],
  39.                     ['fp-3-2', 'fp-3-3']
  40.                 ];
  41.                 this.defaultShow = [1, 2, 3];
  42.                 break;
  43.             case 4:
  44.                 this.data = [
  45.                     ['fp-4-1', 'fp-4-2'],
  46.                     ['fp-4-3', 'fp-4-4']
  47.                 ];
  48.                 this.defaultShow = [4, 1, 2, 3];
  49.                 break;
  50.             case 5:
  51.                 this.data = [
  52.                     ['fp-5-1'],
  53.                     ['fp-5-2'],
  54.                     ['fp-5-3', 'fp-5-4', 'fp-5-5']
  55.                 ];
  56.                 this.defaultShow = [4, 5, 1, 2, 3];
  57.                 break;
  58.             case 6:
  59.                 this.data = [
  60.                     ['fp-6-1'],
  61.                     ['fp-6-2', 'fp-6-3'],
  62.                     ['fp-6-4', 'fp-6-5', 'fp-6-6']
  63.                 ];
  64.                 this.defaultShow = [4, 5, 6, 7, 8, 8];
  65.                 break;
  66.             default:
  67.                 alert("不支持" + mode + "分屏");
  68.         }
  69.         if (this.data != null) {
  70.             this.renderPanel();
  71.             this.bindPanel();
  72.         }
  73.         callback && callback();
  74.     },
  75.     //渲染DOM结构
  76.     renderPanel: function() {
  77.         var that = this;
  78.         var options = this.options;
  79.         var htmlstr = '';
  80.  
  81.         for (var item = 0; item < options.length; item++) {
  82.             htmlstr += '<option value="' + options[item].src + '" label = "' + options[item].frameName + '">' + options[item].frameName + '</option>';
  83.         }
  84.         for (var i = 0; i < this.data.length; i++) {
  85.             var moduleDiv = $('<div></div>').addClass('fp-module-' + i + '');
  86.  
  87.             for (var j = 0; j < this.data[i].length; j++) {
  88.                 var fpDiv = $('<div>').addClass(this.data[i][j]).addClass('fp-box');
  89.                 var topbarDiv = $('<div class="topbarDiv" style="display: none;">' +
  90.                     '<span class="optionsWrap">' +
  91.                     '<a class="btnBig" title="放大" href="javascript:void(0);">放大</a><a class="btnSmall" title="缩小" href="javascript:void(0);" style="display:none;">缩小</a> <a href="javascript:void(0);" class="btnCls" title="关闭"style="display:none;">关闭</a>' +
  92.                     '</span>' +
  93.                     '<div class="dropDiv">' +
  94.                     '<select class="fp-select"><option value="-1">请选择</option>' + htmlstr +
  95.                     '</select>' +
  96.                     '</div>' +
  97.                     '</div>');
  98.                 var iframe = $('<iframe width="100%" height="100%" frameBorder="0" scrolling = "auto"></iframe>');
  99.                 if (i == 0) {
  100.                     fpDiv.attr('zp', 'zp');
  101.                 }
  102.                 fpDiv.append(topbarDiv);
  103.                 fpDiv.append(iframe);
  104.                 moduleDiv.append(fpDiv);
  105.                 this.elem.append(moduleDiv);
  106.             }
  107.         }
  108.         // render iframe
  109.         this.elem.find('iframe').each(function(i) {
  110.             if (options[i]['src']) {
  111.                 var frameSrc = options[that.defaultShow[i]]['src'];
  112.                 var frameName = options[that.defaultShow[i]]['frameName'];
  113.                 var curtopbar = $(this).siblings('.topbarDiv');
  114.                 that.loadIframe($(this), frameSrc, frameName);
  115.                 curtopbar.find('option').each(function() {
  116.                     if ($(this).attr('label') == frameName) {
  117.                         $(this).attr('selected', 'selected');
  118.                     }
  119.                 });
  120.  
  121.             }
  122.         });
  123.     },
  124.     bindPanel: function() {
  125.         var that = this;
  126.         // add select Event
  127.         this.elem.on('change', '.fp-select', function() {
  128.             var value = $(this).find('option:selected').val();
  129.             var label = $(this).find('option:selected').attr('label');
  130.             var iframe = $(this).closest('.fp-box').find('iframe');
  131.             if (value != "-1") {
  132.                 that.loadIframe(iframe, value, label);
  133.             }
  134.         });
  135.  
  136.         // btnbig Event
  137.         this.elem.on('click', '.btnBig', function() {
  138.             var obj = Panel.getSize();
  139.             var btnSmall = $(this).siblings('.btnSmall');
  140.             var btnCls = $(this).siblings('.btnCls');
  141.             var fpbox = $(this).closest('.fp-box');
  142.             fpbox.css({
  143.                 'zIndex': 999
  144.             }).stop().animate({
  145.                 'top': 0,
  146.                 'left': 0,
  147.                 'width': obj.w - 2,
  148.                 'height': obj.h,
  149.                 'right': 0,
  150.                 'bottom': 0
  151.  
  152.             }, 300).attr('scaleMode', 'large');
  153.             that.elem.find('.fp-box:not([scaleMode="large"])').hide();
  154.             $(this).hide();
  155.             $('html,body').css({
  156.                 'overflow': 'hidden'
  157.             });
  158.             btnSmall.show();
  159.             //btnCls.show();
  160.         });
  161.         // btnsmall Event
  162.         this.elem.on('click', '.btnSmall', function() {
  163.             var btnBig = $(this).siblings('.btnBig');
  164.             var fpbox = $(this).closest('.fp-box');
  165.             var btnCls = $(this).siblings('.btnCls');
  166.             fpbox.removeAttr('style').removeAttr('scaleMode');
  167.             $(this).hide();
  168.             that.elem.find('.fp-box').show();
  169.             $('html,body').css({
  170.                 'overflow': 'visible'
  171.             });
  172.             btnCls.hide();
  173.             btnBig.show();
  174.         });
  175.         // btncls Event
  176.         this.elem.on('click', '.btnCls', function() {
  177.             var fpbox = $(this).closest('.fp-box');
  178.             fpbox.remove();
  179.             that.elem.find('.fp-box').show();
  180.             that.fire('removeSettingCls');
  181.         });
  182.     },
  183.     toggleTopbar: function(callback) {
  184.         if (this.elem.find('.topbarDiv:visible').length > 0) {
  185.             this.elem.find('.topbarDiv').hide();
  186.         } else {
  187.             this.elem.find('.topbarDiv').show();
  188.         }
  189.         callback && callback();
  190.     },
  191.     loadIframe: function(iframe, src, framename) {
  192.         $(iframe).attr('src', src);
  193.         $(iframe).attr('framename', framename);
  194.     },
  195.     _on: function(type, handler) {
  196.         if (typeof this.handlers[type] == "undefined") {
  197.             this.handlers[type] = [];
  198.         }
  199.         this.handlers[type].push(handler);
  200.         return this;
  201.     },
  202.     fire: function(type, data) {
  203.         if (this.handlers[type] instanceof Array) {
  204.             var handlers = this.handlers[type];
  205.             for (var i = 0, len = handlers.length; i < len; i++) {
  206.                 handlers[i](data);
  207.             }
  208.         }
  209.     }
  210. };
  211.  
  212. var Panel = {
  213.     config: {
  214.         header: $('.header'),
  215.         container: $('.container'),
  216.         footer: $('.footer'),
  217.         win: $(window)
  218.     },
  219.     resize: function() {
  220.         var topH = Panel.config.header.height();
  221.         var botH = Panel.config.footer.height();
  222.         var mainH = Panel.config.win.height() - topH - botH;
  223.         mainH = mainH < 0 ? 100 : mainH;
  224.         Panel.config.container.height(mainH);
  225.         if ($('.fp-box[scaleMode="large"]').length > 0) {
  226.             $('.fp-box[scaleMode="large"]').css({
  227.                 'width': Panel.config.win.width() - 2,
  228.                 'height': mainH
  229.             });
  230.         }
  231.     },
  232.     getSize: function() {
  233.         var obj = {
  234.             w: Panel.config.container.width(),
  235.             h: Panel.config.container.height()
  236.         };
  237.         return obj;
  238.     }
  239. };

完整demo下载地址：

demo download

水平有限，欢迎各位高手指点，不胜感激....

基于jquery的页面分屏切换模板的更多相关文章

  1. 基于jQuery商城网站全屏图片切换代码

    基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slid ...

  2. 基于jQuery左侧大图右侧小图切换代码

    基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  3. 基于jQuery扁平多颜色选项卡切换代码

    基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  4. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  5. 一款基于jquery超炫的图片切换特效

    今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的 ...

  6. jQuery Mobile页面跳转切换的几种方式

    jQuery Mobile在移动开发中越来越受到欢迎. 而他的各个版本号也在持续不断的更新中.相同的我也非常喜欢它,它加快了我们开发HTML5的速度. 同一时候又具备jQuery一样的操作方法. 学起 ...

  7. 基于jQuery的自适应图片左右切换

    效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm 基于jQuery编写的横向自适应幻灯片切换特效 全屏自适应jquery焦点图切换特效,在IE6这个 ...

  8. 基于jQuery环形图标菜单旋转切换特效

    分享一款基于jQuery环形图标旋转切换特效.这是一款鼠标点击图标菜单圆形顺时针或者逆时针旋转切换代码.效果图如下: 在线预览   源码下载 实现的代码. js代码: /* 图片地址可以是相对路径或绝 ...

  9. iterm 分屏切换快捷键与配色设置

    (1)快捷键设置 ⌘ + d: 垂直分屏, ⌘ + shift + d: 水平分屏. ⌘ + ]和⌘ + [在最近使用的分屏直接切换. ⌘ + opt + 方向键切换到指定位置的分屏. ⌘ + 数字: ...

随机推荐

  1. 转-JavaWeb三大组件之Listener监听器

    JavaWeb三大组件之Listener监听器一.概述1,它是一个接口,内容由我们来实现 2,它需要注册,例如注册在按钮上 3,监听器中的方法,会在特殊事件发生时被调用 二.JavaWeb中的监听器1 ...

  2. 005_tcp/ip监控

    system.monitor.tcpstat 一.listen+established+time wait+close wait. listen:SELECT mean("listen&qu ...

  3. 023_nginx跨域问题

    什么是跨域? 使用js获取数据时,涉及到的两个url只要协议.域名.端口有任何一个不同,都被当作是不同的域,相互访问就会有跨域问题.例如客户端的域名是www.redis.com.cn,而请求的域名是w ...

  4. Zabbix监控nginx性能的另外一种方式

    Zabbix监控nginx性能的另外一种方式 nginx和php-fpm一样内建了一个状态页,对于想了解nginx的状态以及监控nginx非常有用,为了后续的zabbix监控,我们需要先启用nginx ...

  5. 运维与自动化系列③自动化部署基础与shell脚本实现

    自动化部署基础与shell脚本实现 关于自动化的基础知识: 1.1:当前代码部署的实现方式: 运维纯手工scp到web服务器纯手工登录git服务器执行git pull或svn服务器执行svn upda ...

  6. Select查询命令

    一开始SELECT查询的命令为     SELECT * FROM employee;     SELECT 要查询的列名 FROM 表名字 WHERE 限制条件;     若要查询所有内容,就用*代 ...

  7. CentOS入门

    1.因修改/etc/sudoers权限导致sudo和su不能使用问题 https://blog.csdn.net/u014029448/article/details/80944380 2.给用户分配 ...

  8. Struts2配置拦截器

    <package name="loginaction" namespace="/" extends="struts-default"& ...

  9. 【MySql】Group By数据分组

    GROUP BY 语句根据一个或多个列对结果集进行分组. 在分组的列上我们可以使用 COUNT, SUM, AVG,等函数. 因为聚合函数通过作用于一组数据而只返回一个单个值, 因此,在SELECT语 ...

  10. SpringMVC拦截器与异常处理

    点击查看上一章 在我们SpringMVC中也可以使用拦截器对用户的请求进行拦截,用户可以自定义拦截器来实现特定的功能.自定义拦截器必须要实现HandlerInterceptor接口 package c ...