浏览 6999 次
|
精华帖 (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 |
| 返回顶楼 | |
