js實現(xiàn)拉伸拖動iframe的具體代碼

更新時間：2013年08月03日 10:28:42 作者：

這篇文章介紹了js實現(xiàn)拉伸拖動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.dhdzp.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.dhdzp.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.dhdzp.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.dhdzp.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.dhdzp.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.dhdzp.com/index.htm" style="width:100%;height:100%;z-index:10"></iframe>
< /td>
< /tr>
< /table>
< /body>

您可能感興趣的文章:

Electron中實現(xiàn)大文件上傳和斷點續(xù)傳功能
Electron是開源的框架，可以使用h5來開發(fā)跨平臺pc桌面應用，這樣前端開發(fā)這可以開發(fā)桌面應用了。這篇文章主要介紹了Electron中實現(xiàn)大文件上傳和斷點續(xù)傳功能,需要的朋友可以參考下
2018-10-10
Javascript中拼接大量字符串的方法
這篇文章主要介紹了Javascript中拼接大量字符串的方法,本文實現(xiàn)的就是JS語言中的Heredoc語法,需要的朋友可以參考下
2015-02-02
深入理解javascript函數(shù)參數(shù)與閉包
函數(shù)是javascript的一等對象，想要學好javascript，就必須深刻理解函數(shù)。本文對javascript函數(shù)參數(shù)與閉包進行詳細分析介紹。需要的朋友一起來看下吧
2016-12-12
Bootstrap Validator 表單驗證
這篇文章主要介紹了Bootstrap Validator 表單驗證的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07
JS啟動應用程序的一個簡單例子
用jscript實現(xiàn)啟動程序一個例子
2008-05-05
javascript利用控件對windows的操作實現(xiàn)原理與應用
假如要發(fā)送漢字的聊天框的內容的話，我們也要從windows消息機制下手，先找到聊天消息的句柄（可以利用findwindow函數(shù)或者用spy工具哈），然后在找到上面的聊天框的句柄，接著我們就可以想這個句柄發(fā)送WM_SETTEXT的消息了
2012-12-12
JavaScript控制瀏覽器全屏顯示簡單示例
這篇文章主要介紹了JavaScript控制瀏覽器全屏顯示,結合簡單實例形式分析了JavaScript響應鼠標事件控制瀏覽器全屏顯示與退出全屏顯示相關操作技巧,需要的朋友可以參考下
2018-07-07
Typescript3.9 常用新特性一覽(推薦)
這篇文章主要介紹了Typescript3.9 常用新特性一覽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-05-05
javascript基于prototype實現(xiàn)類似OOP繼承的方法
這篇文章主要介紹了javascript基于prototype實現(xiàn)類似OOP繼承的方法,實例分析了JavaScript使用prototype實現(xiàn)面向對象程序設計的中類繼承的相關技巧,需要的朋友可以參考下
2015-12-12
性能優(yōu)化篇之Webpack構建代碼質量壓縮的建議
這篇文章主要介紹了性能優(yōu)化篇之Webpack構建代碼質量壓縮的建議，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04