jquery插件splitScren实现页面分屏切换模板特效_jquery

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

程序相关说明：

HTML结构：

 header

 
 
 

 

js调用：

splitScreen.js相关代码说明：

1.定义一个类

2.prototype主要方法

3.screenMode()方法说明：

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

CSS布局控制：

.fp-box{position:absolute;border:1px solid #000;background:#fff;}
 .fp-1-1{top:0;left:0;right: 0;bottom: 0;}
 .fp-2-1{top:0;left:0;right: 300px;bottom: 0;}
 .fp-2-2{top:0;right: 0px;bottom: 0; width: 300px;}
 .fp-3-1{top:0;left:0;right: 300px;bottom: 0;}
 .fp-3-2{top:0;right: 0;width:300px;height:50%;}
 .fp-3-3{top:50%;right: 0;bottom: 0;width:300px;}

 .fp-4-1{top:0;left:0;right: 50%;height:50%;}
 .fp-4-2{top:50%;left:0;right: 50%;bottom: 0;}
 .fp-4-3{top:0;right: 0;width:50%;height:50%;}
 .fp-4-4{top:50%;right: 0;bottom: 0;width:50%;}
 
 .fp-5-1{top:0;left:0;right: 300px;bottom: 252px;}
 .fp-5-2{top:0px;width:300px;right: 0;bottom: 252px;}
 .fp-5-3{height: 250px;left:0;width:30%;bottom: 0;}
 .fp-5-4{height: 250px;left:30%;width:30%;bottom: 0;}
 .fp-5-5{height: 250px;left:60%;bottom: 0;right: 0;}

 .fp-6-1{top:0;left:0;right: 300px;bottom: 252px;}
 .fp-6-2{top:0;width:300px;right: 0;height:250px;}
 .fp-6-3{top:250px;width:300px;right: 0;bottom: 252px;}
 .fp-6-4{height: 250px;left:0;width:30%;bottom: 0;}
 .fp-6-5{height: 250px;left:30%;width:30%;bottom: 0;}
 .fp-6-6{height: 250px;left:60%;bottom: 0;right: 0;}

完整代码：

HTML：

 
 
 
 

 
 
 header
 
 
 
 
 
 
 
 

 
 
 

 
 
 

 
 
 

 
 
 
 
 
 
 
 

JS：

以上所述就是本文的全部内容了，希望大家能够喜欢。