浏览 7002 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (3) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2009-12-26
最后修改:2010-04-09
说明:以前发布的不知道为什么不好用,这次是修改的最新的版本,可以好用!只支持ie!!
需求:可以随时拖动中间div改变两边的边框架(left,right)宽度,并解决了拖拽过程中不断渲染页面的效率问题. 缺陷:仅支持ie. 下面是测试test.htm: <html> <head> <style> .a { position:relative; width:100%; height:100%; border: solid 0px; z-index:1; cursor:e-resize; border-width:0px; margin:0px; background-color:green; } </style> </head> <SCRIPT LANGUAGE="JavaScript"> <!-- function init(){ var ans = []; for(i=0;i<10000;i++) { ans.push(i); } document.getElementById('a').innerHTML = ans.join(','); } //--> </SCRIPT> <body onload='init();'> <div id='a' style='width:100%;height:100%;word-wrap: break-word;'></div> </body> </html> 下面是主要的页面 <HTML> <head> <style type='text/css'> .table{ width:400; height:2; background-color:red; border-color:yellow; border:0px; } </style> <SCRIPT LANGUAGE="JavaScript"> function downToResize(obj,e,lf,rf,bx){ obj.style.cursor='col-resize'; var e = window.event; //记录开始准备移动的起始位置 obj.mouseDownX=e.clientX; //父级左边框架的宽度 obj.parentLeftFW = document.getElementById(lf).parentNode.clientWidth; //父级右边框架的宽度 obj.parentRightFW = document.getElementById(rf).parentNode.clientWidth; //obj.parentBox = document.getElementById(bx); obj.setCapture(); if(!obj.createBox){ var div = document.createElement("div"); div.id = 'box'+lf+rf; div.style.display = 'none'; div.style.position = 'absolute'; div.style.border = '1px dotted red'; div.style.zIndex = '5'; div.style.width = '3px'; div.style.height = '100%'; document.body.appendChild(div); obj.parentBox = document.getElementById(div.id); obj.createBox = 1; } } function moveToResize(obj,e){ var e = window.event; if(!obj.mouseDownX) return false; obj.removed = 1; obj.parentBox.style.display = 'inline'; obj.parentBox.style.width = obj.offsetWidth; obj.parentBox.style.height = obj.offsetHeight; obj.parentBox.style.left = e.clientX; obj.parentBox.style.top = getPosTop(obj); } function getPosLeft(elm) { var left = elm.offsetLeft; while((elm = elm.offsetParent) != null) { left += elm.offsetLeft; } return left; } function getPosTop(elm) { var top = elm.offsetTop; while((elm = elm.offsetParent) != null) { top += elm.offsetTop; } return top; } function upToResize(obj,e,lf,rf){ var e = window.event ; //下面是实际的移动边框的大小 var changeW = e.clientX*1-obj.mouseDownX; if(changeW!=0&&obj.removed){ var newLeftW=obj.parentLeftFW*1+changeW; var newRightW=obj.parentRightFW*1-changeW; if(newLeftW<=200) { var temp = newLeftW; newLeftW = 200; newRightW =newRightW-(200-temp); } if(newRightW<=200) { var temp = newRightW; newRightW = 200; newLeftW = newLeftW-(200-temp); } var leftObj = document.getElementById(lf).parentNode; leftObj.width = newLeftW; leftObj.firstChild.style.width = newLeftW+'px'; var rightObj = document.getElementById(rf).parentNode; //下面的之所以要减掉一个4,是在鼠标旁边的一个小小的位移.. rightObj.width = newRightW-4; rightObj.firstChild.style.width = newRightW-4; //rightObj.width = '100%'; //rightObj.firstChild.style.width = '100%'; } obj.releaseCapture(); obj.mouseDownX=0; obj.removed = 0; obj.style.cursor = 'default'; obj.parentBox.style.display = 'none'; } </SCRIPT> </head> <body style="overflow: hidden;"> <TABLE height="100%" width='100%'> <TR> <TD ><iframe id='left' src='test.html' style="width:100%;height:100%;z-index: -1;border:0px;" scrolling="no"></iframe> </TD> <td><div style='height:100%;background-color:red;width:8px;' onmousedown="downToResize(this,event,'left','right');" onmouseover="this.style.cursor='col-resize';" onmousemove="moveToResize(this,event);" onmouseout="this.style.cursor='default';" onmouseup="upToResize(this,event,'left','right');"></div></td> <TD><iframe id='right' src='test.html' style="height:100%;z-index: -1;width:100%;border:0px;" scrolling="no" ></iframe></TD> <td><div style='height:100%;background-color:red;width:8px;' onmousedown="downToResize(this,event,'right','right2');" onmouseover="this.style.cursor='col-resize';" onmousemove="moveToResize(this,event);" onmouseout="this.style.cursor='default';" onmouseup="upToResize(this,event,'right','right2');"></div></td> <TD><iframe id='right2' src='test.html' style="height:100%;z-index: -1;width:100%;border:0px;" scrolling="no" ></iframe></TD> </TR> </TABLE> </body> </HTML> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-01-04
不能用 Ie提示程序脚本 会照成运行速度减慢~~拖动就卡,没效果
|
|
返回顶楼 | |
发表时间:2010-01-04
最后修改:2010-01-04
dyllove98 写道 不能用 Ie提示程序脚本 会照成运行速度减慢~~拖动就卡,没效果
我测试了一下是好用的啊,楼上的使用的是ie几?? 我用的是ie8. |
|
返回顶楼 | |
发表时间:2010-04-07
我也是脚本出错 objobj.parentBox.style.width = obj.offsetWidth;
objobj.parentBox.style.height = obj.offsetHeight; objobj不存在,改为obj,没效果,ie卡死 我用的是ie8 |
|
返回顶楼 | |