这篇文章介绍了js实现拉伸拖动iframe的具体代码，有需要的朋友可以参考一下
左边iframe放树目录，右边的iframe放index页。拖鼠标同时控制2个iframe的宽高。
期待有人能改进。
操作方法：鼠标指到2个iframe中间，可以水平拖，纵向拖(控制高度)
缺点：CSDN页面放开鼠标后才改大小，不占CPU资源。 这个是实时改大小，所以速度太慢，希望有人来改改。我是不想弄了，反正又没用什么特别的技术。
提示：拖动的秘密就在filter:alpha(opacity=0)这一句

<html>

<script language="javascript">

var mouseX = 0;

var mouseY = 0;

var w=5;

function divonmousemove(){

obj1=document.getElementById("a");

obj2=document.getElementById("b");

obj12=document.getElementById("ab");

if (mouseX!==event.x && mouseY!==event.y)obj12.style.cursor='se-resize';

else if (mouseX!==event.x)obj12.style.cursor='e-resize';

else if (mouseY!==event.y)obj12.style.cursor='s-resize';

else obj12.style.cursor='';

if (event.button==1){

obj1.style.width=parseInt(obj1.offsetWidth)+(event.x - mouseX);

mouseX=event.x;

obj1.style.height=parseInt(obj1.offsetHeight)+(event.y - mouseY);

mouseY= event.y;

obj12.style.width=108;

obj12.style.left=obj1.offsetWidth-obj12.offsetWidth/2;

obj12.style.height=obj1.clientHeight;

obj2.style.height=obj1.clientHeight;

obj2.style.left=obj1.clientWidth+w;

obj2.style.width=screen.width-obj1.offsetWidth-w;

}}

function divonmousedown(){

mouseX = event.x;

mouseY = event.y;

}

function divonmouseup(){

obj12.style.left=obj1.offsetWidth;

obj12.style.width=w;

mouseX = 0;

mouseY = 0;}

</script>

<body style='margin:0'>

<iframe zindex=1 id="a" src="http://www.jbxue.com /Tree/tree.htm" style="width:200;height:610;position:absolute;z-index:9 "></iframe>

<div zindex=0 id='ab' onmousemove='divonmousemove();' onmouseleave='document.getElementById("ab").style.cursor='';'

onmousedown='divonmousedown();' onmouseup='divonmouseup();'

style='filter:alpha(opacity=0);width:5;height:799;background:#aaffaa;position:absolute;left:200;z-index:100' title='按下鼠标拖动大小'></div>

<iframe zindex=1 id="b" name="ContentFrame" src="http://www.jbxue.com /index.htm" style="width:799;height:612;position:absolute;left:205;z-index:10"></iframe>

</body>

</html>

修改一：

<script language="javascript">

var isResizing=false;

function Resize_mousedown(event,obj){

obj.mouseDownX=event.clientX;

obj.leftTdW=obj.previousSibling.offsetWidth;

obj.setCapture();

isResizing=true;

}

function Resize_mousemove(event,obj){

if(!isResizing) return ;

var newWidth=obj.leftTdW*1+event.clientX*1-obj.mouseDownX;

if(newWidth>0) obj.previousSibling.style.width = newWidth;

else obj.previousSibling.style.width=1;

}

function Resize_mouseup(event,obj){

if(!isResizing) return;

obj.releaseCapture();

isResizing=false;

}

< /script>

< body style='margin:0' >

< table style="width:100%;height:100%;" border=0 cellspacing=0 cellpadding=0px >

< tr>

< td style="width:150px;">

< iframe zindex=1 id="a" src="http://www.jbxue.com /Tree/tree.htm" style="width:100%;height:100%;z-index:9 "></iframe>

< /td>

< td style="width:2px;cursor:e-resize;background-color:#cccccc;" onmousedown="Resize_mousedown(event,this);"

onmouseup="Resize_mouseup(event,this);" onmousemove="Resize_mousemove(event,this);">

< /td>

< td>

< iframe zindex=1 id="b" name="ContentFrame" src="http://www.jbxue.com /index.htm" style="width:100%;height:100%;z-index:10"></iframe>

< /td>

< /tr>

< /table>

< /body>

修改二：

<script language="javascript">

var isResizing=false;

function Resize_mousedown(event,obj){

obj.mouseDownX=event.clientX;

obj.leftTdW=obj.previousSibling.offsetWidth;

obj.setCapture();

isResizing=true;

}

function Resize_mousemove(event,obj){

if(!isResizing) return ;

var newWidth=obj.leftTdW*1+event.clientX*1-obj.mouseDownX;

if(newWidth>0) obj.previousSibling.style.width = newWidth;

else obj.previousSibling.style.width=1;

}

function Resize_mouseup(event,obj){

if(!isResizing) return;

obj.releaseCapture();

isResizing=false;

}

function Resize_setDefault(event,obj){

if(obj.innerText=="<") {

obj.parentNode.previousSibling.style.width=1;

obj.innerText=">";

}

else{

obj.parentNode.previousSibling.style.width=150;

obj.innerText="<";

}

event.cancelBubble=true;

}

< /script>

< body style='margin:0' >

< table style="width:100%;height:100%;" border=0 cellspacing=0 cellpadding=0px >

< tr>

< td style="width:150px;" >

< iframe zindex=1 id="a" src="http://www.jbxue.com /Tree/tree.htm" style="width:100%;height:100%;z-index:9 "></iframe>

< /td>

< td style="width:3px;cursor:e-resize;background-color:#cccccc;" align="center" valign="middle"

onmousedown="Resize_mousedown(event,this);" onmouseup="Resize_mouseup(event,this);" onmousemove="Resize_mousemove(event,this);">

<font style="size:3px;background-color:#eeeeee;cursor:pointer;" onmousedown="Resize_setDefault(event,this);"><</font>

< /td>

< td>

< iframe zindex=1 id="b" name="ContentFrame" src="http://www.jbxue.com /index.htm" style="width:100%;height:100%;z-index:10"></iframe>

< /td>

< /tr>

< /table>

< /body>

js实现拉伸拖动iframe的具体代码的更多相关文章

  1. js实现可拖动Div

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...

  2. js/jquery/html前端开发常用到代码片段

    1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...

  3. js/es6 元素拖动

    元素事件:鼠标按下事件/鼠标移动事件/鼠标松开事件 元素样式:让元素脱离文档流,采用绝对定位的方式. 一.鼠标按下事件 当鼠标在元素上面按下时,保存元素的初始偏移量和鼠标按下时的坐标,然后在状态变量里 ...

  4. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  5. js和jquery给iframe src赋值的3种方法

    js和jquery给iframe src赋值的3种方法   网页使用iframe嵌入网页时,有时候需要动态处理src的值,而不是写死的,所以我们需要知道如何给iframe src赋值,通常是使用js或 ...

  6. js技术之拖动table标签

    一.js技术之拖动table标签 起因:前几天公司,突然安排一个任务 任务描述:要求尺码table列表要像Excel表中一样可以直接移动整行尺码到任意行位置 技术点:采用ui的sortable技术来h ...

  7. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JS将搜索的关键字高亮显示实现代码

    这篇文章介绍了JS将搜索的关键字高亮显示实现代码,有需要的朋友可以参考一下 用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物 当在文章里头出现这些关键字,就把它加亮显 ...

  9. KoaHub平台基于Node.js开发的Koa 连接支付宝插件代码信息详情

    KoaHub平台基于Node.js开发的Koa 链接支付宝插件代码信息详情 easy-alipay alipay payment & notification APIs easy-alipay ...

随机推荐

  1. Proguard随笔

    - ProGuard是一个压缩.优化和混淆Java字节码,它能够删除字节码中无用的类.字段.方法和无用的凝视,还能够对类.字段.方法和属性进行混淆. - 字节码事实上包括了大量的调试信息,从而非常ea ...

  2. VS2010已停止工作，framework 4.0安装失败

    好久没在台式机上写程序了,今天打开一个解决方案,报错: 从来没有遇到这种情况,重新关闭解决方案,在菜单栏中打开解决方案说没有framework 4.0,其实我安装的是4.5 ,也有4.0,于是全部卸载 ...

  3. UIFont可用字体

    label.font = [UIFont fontWithName:@"Arial-BoldItalicMT" size:24]; 字体名如下: Font Family: Amer ...

  4. java面试第十六天

    国际化:让世界上每个人都能看懂. Locale类(java.util包下):包括所有国家.地区.语言 存在很多的静态属性,来表示国家.语言 三种构造方法: Locale(String language ...

  5. Eclipse Console 加大显示的行数和禁止错误弹出

    在 Preferences-〉Run/Debug-〉Console里边,去掉对Limit console output的选择,或者选择,设置一下buffer size的设定值 禁止弹出: Prefer ...

  6. Guava学习之Preconditions

    在编写程序的时候,很多时候都需要检查输入的参数是否符合我们的需要,比如人的年龄需要大于0,名字不能为空:如果不符合这两个要求,我们将认为这个对象是不合法的,这时候我们需要编写判断这些参数是否合法的函数 ...

  7. imp与impdp比较

    impdp和expdp是oracle 10g及以上版本才带的命令,目的是替换imp和exp命令,但为了向后兼容,故后面命令在高版本中依然可以使用. 但imp和exp在处理跨版本的导入导出时很麻烦,而i ...

  8. JDBC实例--通过连接工具类DBUtil +配置文件来获取连接数据库，方便又快捷

    根据前面的连接方法,还有缺点就是,如果人家要换数据库,还得改动源代码,然后还要编译什么的.这样客户修改也不容易. 做法:我们写一个配置文件,把该数据写在配置文件上面,然后通过类来加载改文件,然后读取相 ...

  9. java 和 C 代码运行效率的比较（整理）

    最近和朋友无意间讨论起了 有关java 和C 的 效率问题, (我是java 推介者, 他是 c 语言推介者, 他做的是嵌入式) 故,想通过网络查询一下, 总结一下,两者到底效率如何,其有何差异,原因 ...

  10. 云ci自动构建实例 最佳实践