jquery插件splitScren實現頁面分屏切換模板特效

 這篇文章主要介紹了jquery插件splitScren實現頁面分屏切換模板特效的相關資料,需要的朋友可以參考下

   

閒來無事，搞了個頁面的分屏效果，先來看下效果：

出於可自定義寬高的目的,屏幕分塊由CSS控制，由js控制估計等分模塊效果一般.

程序相關說明：

HTML結構：

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

js調用：

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

splitScreen.js相關代碼說明：

1.定義一個類

? 1 2 3 4 5 var splitScreen = function(elem, options) { this.elem = elem; //分屏模塊渲染區域元素 this.options = options;//分屏鏈接數據 this.initialize.apply(this); //初始化初始化分屏 }

2.prototype主要方法

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

3.screenMode()方法說明：

主要是根據不同的分屏切換不同的Class，通過CSS類去控制分屏布局.這樣寫的好處應該是可以自定義布局的寬高大小，但是比較繁瑣。如下：

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