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

来源：动视网责编：小采时间：2020-11-27 21:39:32

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

jquery插件splitScren实现页面分屏切换模板特效_jquery:闲来无事，搞了个页面的分屏效果，先来看下效果：出于可自定义宽高的目的,屏幕分块由CSS控制，由js控制估计等分模块效果一般. 程序相关说明： HTML结构： header js调用： //分屏数据 var iframes = [ { id:'frames_

推荐度：

点击下载本文 文档为doc格式

导读jquery插件splitScren实现页面分屏切换模板特效_jquery:闲来无事，搞了个页面的分屏效果，先来看下效果：出于可自定义宽高的目的,屏幕分块由CSS控制，由js控制估计等分模块效果一般. 程序相关说明： HTML结构： header js调用： //分屏数据 var iframes = [ { id:'frames_

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

出于可自定义宽高的目的,屏幕分块由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：