这篇文章介绍了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. com.esotericsoftware.kryo.kryoexception java.util.ConcurentModificationException

    近期 有网友看我的"整合Kafka到Spark Streaming--代码演示样例和挑战"文章, 讲 kafka对象 放到 pool 并通过broadcast广播出去: 然后 在开 ...

  2. cocos lua 加密与解密 混淆 (版本号cocos3.4)

    cocos luacompile cocos luacompile Overview Usage Available Arguments Samples Overview Compile the .l ...

  3. 自定义cas客户端核心过滤器AuthenticationFilter

    关于cas客户端的基本配置这里就不多说了,不清楚的可以参考上一篇博文:配置简单cas客户端.这里是关于cas客户端实现动态配置认证需要开发说明. 往往业务系统中有些模块或功能是可以不需要登录就可以访问 ...

  4. VS2010中生成遇到的 web.config 问题

    1. 错误:无法在此路径使用此配置节.当站点管理员使用继承的配置文件中的  <location allowOverride="false">  锁定对此节的访问时会出现 ...

  5. Android 之 Android目录

    Android的目录结构如图所示: 下面来分别说说各个目录: 1.src:存放应用程序中所有的(后台)源代码,代码的源文件一般存放在相应的包下面. 2.gen:该目录下一般有BuildConfig.j ...

  6. 1423 Greatest Common Increasing Subsequence （LCIS）

    讲解摘自百度; 最长公共上升子序列(LCIS)的O(n^2)算法? 预备知识:动态规划的基本思想,LCS,LIS.? 问题:字符串a,字符串b,求a和b的LCIS(最长公共上升子序列).? 首先我们可 ...

  7. Banner尺寸多大最好！

    关于网站图片的大小问题 最近发现各大网站的图片做的都很大 随笔找了一个,下载其页面banner, 详细属性:基本全是1920*高.Get√

  8. MariaDB卸载

    二进制安装方式的MariaDB卸载 关闭mysql服务 service mysql stop 或 /etc/init.d/mysql stop 或 mysqladmin shutdown -uroot ...

  9. springmvc自己定义拦截器

    Spring MVC也能够使用拦截器对请求进行拦截处理,用户能够自己定义拦截器来实现特定的功能,自己定义的拦截器必须实现HandlerInterceptor接口. 直接看下样例: package co ...

  10. 新浪微博 使用OAuth2.0调用API

    # -*- coding: cp936 -*- #python 2.7.10 #xiaodeng #新浪微博 使用OAuth2.0调用API #微博开放接口的调用,都需要获取用户的身份认证.目前微博开 ...