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://community.csdn.net/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='';' 
>
< table style="width:100%;height:100%;" border=0 cellspacing=0 cellpadding=0px >
< tr>
< td style="width:150px;" >
< iframe zindex=1 id="a" src="http://community.csdn.net/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://community.csdn.net/index.htm" style="width:100%;height:100%;z-index:10"></iframe>
< /td>
< /tr>
< /table>
< /body> 

时间: 2024-11-02 07:02:42

js实现拉伸拖动iframe的相关文章

js实现拉伸拖动iframe的具体代码

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

js实现拉伸拖动iframe的具体代码_javascript技巧

左边iframe放树目录,右边的iframe放index页.拖鼠标同时控制2个iframe的宽高.期待有人能改进.操作方法:鼠标指到2个iframe中间,可以水平拖,纵向拖(控制高度)缺点:CSDN页面放开鼠标后才改大小,不占CPU资源. 这个是实时改大小,所以速度太慢,希望有人来改改.我是不想弄了,反正又没用什么特别的技术.提示:拖动的秘密就在filter:alpha(opacity=0)这一句 复制代码 代码如下:  <html><script language="java

js实现可拖动DIV的方法

 这篇文章主要介绍了js实现可拖动DIV的方法,有需要的朋友可以参考一下 随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下.        现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路:        1.捕捉鼠标div的mousedown事件    

js 动态添加创建 iframe

一款简单实例的js 动态添加创建 iframe哦,他可以动态添加iframe哦,只要你指定一个id编码就ko了.下面看看增加代码 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/

嵌套-小白刚学js,求助一个iframe的问题

问题描述 小白刚学js,求助一个iframe的问题 小白想实现一个功能,把一个A网页嵌套在B网页里,A网页是已经存在的网站,比如搜狐,新浪的首页. B网页只是一个壳子.然后我想利用js代码,在PC上实现触摸滑屏,像在手机上的操作一样的. 现在遇到问题是,我用iframe把A网页嵌套好了,然后对div进行scroll操作,发现只要我鼠标操作在iframe内容里都不行,但在iframe内容外的都可以..求解.. 解决方案 这是脚本的作用域的问题:因为iframe里显示的是其它网页,并没有你的事件的响

JS获取并操作iframe中元素的方法_javascript技巧

JS获取/设置iframe内对象元素.文档的几种方法 1.IE专用(通过frames索引形象定位): 复制代码 代码如下: document.frames[i].document.getElementById('元素的ID'); 2.IE专用(通过iframe名称形象定位): 复制代码 代码如下: document.frames['iframe的name'].document.getElementById('元素的ID'); 以上方法,不仅对iframe适用,对frameset里的frame也同

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转_javascript技巧

通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性 从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" class="open" value=&quo

JS实现左右拖动改变内容显示区域大小的方法_javascript技巧

本文实例讲述了JS实现左右拖动改变内容显示区域大小的方法.分享给大家供大家参考.具体如下: 这里演示左右可拖动的内容显示区效果,左右拖动红条改变显示区域宽度大小,往左拖则全部显示右侧内容,往右拖则全部显示左则内容,类似QQ的聊天窗口一样,可以向上或向下拖动大小,以适合使用者的要求.本代码完全JavaScript与CSS代码结合实现,在各主流浏览器内运行的兼容性也不错,左右拖动改变大小的JS代码推荐给大家. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2

js实现div拖动动画运行轨迹效果代码分享_javascript技巧

本文实例讲述了js div拖动动画运行轨迹效果.分享给大家供大家参考.具体如下: 这是一款基于js实现的div拖动动画运行轨迹效果源码,是一款原生js div拖动效果制作鼠标拖动div动画运行轨迹效果代码.可以选择[记住轨迹]与[不记住轨迹]两种拖动显示模式,从而显示出不同的拖动效果. 运行效果图:                                        -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能