这篇文章介绍了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. 免费的Bootstrap等待页面的应用模板

    在线演示 本地下载 这是一款适合移动设备的网页模板,它页面干净小巧.有很多新元素在其中,可以自定义动画和特效.非常酷!

  2. Mysql 环境配置查询

    Mysql 环境查询 1, 查看全部的引擎 a) Show engines 或者是进入到information_schama里面去查看ENGINES表 2, 查看当前用户 a) Select user ...

  3. 批量合并GDB

    在实际操作中,经常对数据库文件进行合并.裁切等.如果遇到gdb比较多,要素层比较多,而且还存在数据集.虽然ArcGIS中的批量处理的功能,但填写参数过程也比较麻烦,如果一次性处理过多,程序容易停止工作 ...

  4. windows7系统下升级到IE11时无法使用F12开发人员工具的解决办法

    windows7系统下升级到IE11时,发现F12开发人员工具无法使用,打开都是空白的 解决办法,就是下载IE11的补丁,下载地址为:https://www.microsoft.com/zh-CN/d ...

  5. Linux内核二层数据包接收流程

    本文主要讲解了Linux内核二层数据包接收流程,使用的内核的版本是2.6.32.27 为了方便理解,本文采用整体流程图加伪代码的方式从内核高层面上梳理了二层数据包接收的流程,希望可以对大家有所帮助.阅 ...

  6. uni - 介绍

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台 优点:基于vue.mpvue.微信小程序 微信小程序AP ...

  7. PyQt5教程——布局管理（4）

    PyQt5中的布局管理 布局管理是GUI编程中的一个重要方面.布局管理是一种如何在应用窗口上防止组件的一种方法.我们可以通过两种基础方式来管理布局.我们可以使用绝对定位和布局类. 绝对定位 程序指定了 ...

  8. hadoop MultipleInputs fails with ClassCastException （get fileName）

    来自:http://stackoverflow.com/questions/11130145/hadoop-multipleinputs-fails-with-classcastexception F ...

  9. 检查用户输入信息是否完整（vb.net实现）

        机房收费系统中.在将用户输入的信息封装到实体中作为參数传到B层之前,总要对用户输入的信息进行检查.我将这种检查分为两类: 合法性检查 完整性检查     所谓合法性检查,就是用户输入的信息是否 ...

  10. javascript 跳出（终止）forEach循环

      javascript 跳出(终止)forEach循环 CreateTime--2018年4月23日17:58:12 Author:Marydon 报错信息: 解决方案: javascript 跳出 ...