这个标题有些绕口，鄙人愚笨，实在找不到一个比较准确的说法，总之就是：
一个页面内显示多个iframe，一个变宽，另一个就变窄，一个变高，另一个就变矮的这种可自由伸缩的效果。它们之间有一个可多拽的分隔条。
我们公司的电算化考试平台需要这样的效果。最开始用的frameset，框架集，但有些问题，比如分隔条的样式不好自己设计，frameset页面不支持执行javascript。
后来我对其进行了改进，将frameset改为使用iframe，通过自己实现分隔条和拖拽效果来满足功能。
效果图：
可以点击分隔条折叠，也可以拖动分隔条调整各区域大小。
上图中，main.html页面按左右分隔嵌入了一个left.html和一个right.html
right.html里又按上下分隔嵌入了right_top.html和right_bottom.html
由于left.html、right_top.html、right_bottom.html是具体内容页面，此处不贴出代码，只贴出main.html和right.html的代码。
main.html代码：
1 <!DOCTYPE html
2 [/span>html
3 [/span>head
4 [/span>meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
5 [/span>meta http-equiv="X-UA-Compatible" content="IE=edge"
6 [/span>meta name="renderer" content="webkit"
7 [/span>script type="text/javascript" src=""
8 [/span>style type="text/css"
9 {padding:0px;margin:0px;}//代码效果参考：http://www.ezhiqi.com/zx/art_5594.html
10 html,body{Width＜/span>:100%;Height＜/span>:100%;}
11
12 [/span>title
13 [/span>script type="text/javascript"
14 /**
15
16 iframe横向分隔条拖拽伸缩实例 陈建宇 2016-6-14
17
18 **/
19 function init(){
20
21 var li = $("#li");//left iframe
22 var ri = $("#ri");//right iframe
23 var s = $("#s");//中间分割条
24 var img = s.children("img").eq(0);
25 var drag = $("#drag");//分隔条中的拖拽层.
26
27 var clientWidth = $(window).width();
28 var li_init_Width＜/span>=270;//上边iframe要显示的宽度,若需要调整默认宽度,请改此值即可.
29 var s_init_Width＜/span>=10;//分隔条宽度默认值
30 var ri_Width＜/span>=clientWidth＜/span>-li_init_Width＜/span>-s_init_width;//底部iframe要显示的宽度
31
32 //初始化
33 li.css("Width＜/span>",li_init_Width＜/span>+"px");
34 ri.css("Width＜/span>",ri_Width＜/span>+"px");
35 s.css("left",li_init_Width＜/span>+"px").css("Width＜/span>",s_init_Width＜/span>+"px");
36 img.css("Width＜/span>",s_init_Width＜/span>+"px").css("box-shadow","0 0 6px #666");
37
38 var is_drag = false;//是否点住并进行了拖拽
39
40
41 /**
42 分隔条事件处理,如果用户执行了mousedown,mousemove,mouseup说明是拖拽,
43 如果只执行了mousedown,mouseup说明是点击.
44 /
45
46
47 drag.unbind("mousedown").mousedown(function () {
48 //获得分隔条内拖拽层离顶边的距离
49 var li_width = parseInt(li.css("Width＜/span>"));
50 var ri_width = parseInt(ri.css("Width＜/span>"));
51
52 //分隔条div宽度设为100%,撑满屏,只有这样才能在拖拽分隔条时,有效的控制mouseup事件.
53 s.css("Width＜/span>","100%").css("left","0px");
54 img.css("left",li_width);
55
56 var start_x = event.clientX;
57
58 drag.unbind("mousemove").mousemove(function (event) {
59 is_drag = true;
60 var current_x = event.clientX;
61 var cha = current_x - start_x;//算偏移差量
62
63 li.css("Width＜/span>",(li_Width＜/span>+cha)+"px");
64 <span style="background-color: rgba(245, 245, 2
