这篇文章介绍了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. 基于Mongodb进行分布式数据存储

    http://blog.csdn.net/daizhj/article/details/5868360 注:本文是研究Mongodb分布式数据存储的副产品,通过本文的相关步骤可以将一个大表中的数据分布 ...

  2. 如何自定义CollectionView中每个元素的大小和间距

    问题: 让每个元素大小变为104 x 104 Step 1: 在你的视图控制器头文件中实现UICollectionViewFlowLayout协议 eg: @interface XXViewContr ...

  3. hdu-悼念512汶川大地震遇难同胞——珍惜现在，感恩生活

    http://acm.hdu.edu.cn/showproblem.php?pid=2191 Problem Description 急!灾区的食物依然短缺! 为了挽救灾区同胞的生命,心系灾区同胞的你 ...

  4. 算法笔记_208:第六届蓝桥杯软件类决赛真题(Java语言A组)

    目录 1 胡同门牌号 2 四阶幻方 3 显示二叉树 4 穿越雷区 5 切开字符串 6 铺瓷砖   前言:以下代码仅供参考,若有错误欢迎指正哦~ 1 胡同门牌号 标题:胡同门牌号 小明家住在一条胡同里. ...

  5. Windows 无法启动MongoDB服务 错误1067：进程意外终止

    1:Windows 无法启动MongoDB服务 错误1067:进程意外终止 2:解决方法: 进入MongoDB安装目录\data\将此文件夹下的mongod.lock删除(网友提供解决方案,实验之后貌 ...

  6. 建maven私服nexus

    1.下载nexus 2.配置java环境 3.安装 C:\Program Files\nexus\nexus-2.11.4-01\bin\jsw\windows-x86-64 4.配置 http:// ...

  7. [C#]记录程序耗时的方法【转发】

    System.Diagnostics.Stopwatch stopwatch = new System.Diagnostics.Stopwatch(); stopwatch.Start(); // H ...

  8. dojo之配置dojoconfig

    官方教程:Configuring Dojo with dojoConfig例子: <-- set Dojo configuration, load Dojo --> <script& ...

  9. 参数关键点和return返回多个(伪多个)值问题

    # -*- coding: cp936 -*- #python 27 #xiaodeng #参数关键点和return返回多个(伪多个)值问题 #传递参数的概念: #即:对象作为输入,发送给函数的方式 ...

  10. 怎么将txt文件转化为html格式的文件？--极为丑陋的方式

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #怎么将txt文件转化为html格式的文件?--极为丑陋的方式 import os #找出所有的txt格式的文 ...