这篇文章介绍了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. ZH奶酪：【阅读笔记】Deep Learning, NLP, and Representations

    中文译文:深度学习.自然语言处理和表征方法 http://blog.jobbole.com/77709/ 英文原文:Deep Learning, NLP, and Representations ht ...

  2. uni-app 如何开启sass\less处理

    开启方式:工具->插件安装->安装完成,启用即可

  3. Mysql(一）安装

    一.下载 下载地址:http://www.mysql.com/downloads/ 二.安装 解压 双击安装 下一步,选择NO, 下一步,选择, 按需求选择,这时选择developer default ...

  4. java经典小程序

    1,编写程序,判断给定的某个年份是否是闰年. 闰年的判断规则如下: (1)若某个年份能被4整除但不能被100整除,则是闰年. (2)若某个年份能被400整除,则也是闰年. import java.ut ...

  5. 用javascript的isNan()函数，可以判断是否为数字

    var getstockid = $.trim($("#SearchString").val()); if (!isNaN(getstockid)) alert('是数字!'); ...

  6. 封装UIlabel 辨别用户名 ，话题 ，链接，电话，高亮文字等

    概述 对UIlabel进行封装 用于辨别用户名 ,话题 ,链接,电话,高亮文字等,链接跳转网页,电话点击拨打电话,完美封装UIlabel,适合绝大多数需求 详细 代码下载:http://www.dem ...

  7. 搭建Hexo博客并部署到Github

    参考: http://www.jianshu.com/p/a67792d93682 http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d. ...

  8. Opcode查看利器之vld

    简介 在PHP的生命周期中 词法分析(zend_language_scanner),将PHP代码转换为语言片段(Tokens) 语法分析(zend_language_parser)将Tokens转换成 ...

  9. 给你出道题：依次去掉离中心最远的M个点

    给定一个数组a[N],里面包含N个向量.现在要求进行删点操作,删点原则如下: 1.求出N个向量的中心O1,删除离O1最远的那个点 2.求出N-1个向量的中心O2,删除O2最远的那个点 ...... 重 ...

  10. 推荐系统之 BPR 算法及 Librec的BPR算法实现【1】

    [推荐系统之 BPR 算法] 1.关于BPR的论文原文: BPR: Bayesian Personalized Ranking from Implicit Feedback 2.参考1:论文快读 - ...