js_javascript スキルを使用して iframe を伸縮およびドラッグするための特定のコード

左側の iframe はツリー ディレクトリを保持し、右側の iframe はインデックス ページを保持します。マウスをドラッグして 2 つの iframe の幅と高さを同時に制御します。 誰かがそれを改善してくれることを願っています。 操作方法: 2 つの iframe の間にマウスを置き、水平方向または垂直方向にドラッグします (高さを制御します) 欠点: マウスを放すと CSDN ページのサイズが変更されるため、CPU リソースを占有しません。 これはリアルタイムでサイズを変更するので、速度が遅すぎるので、誰かが変更できることを願っています。特別な技術を使っていないので、もうやりたくないです。 ヒント: ドラッグの秘密は、filter:alpha(opacity=0) の文にあります

コードをコピーします コード var MouseX = 0; var w=5; 関数 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); obj1.style.height=parseInt(obj1.offsetHeight) (event.y - マウス 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; } 関数 divonmouseup(){ obj12.style.left=obj1.offsetWidth; obj12.style.width=w; マウス X = 0 マウス Y = 0;} &lt ;/script> onmousedown='divonmouseup();' 'filter:alpha (opacity=0);width:5;height:799;background:#aaffaa;position:absolute;left:200;z-index:100' title='マウスを押してサイズをドラッグします'>

変更 1 :

コードをコピー コードは次のとおりです: 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*1event.clientX *1-obj.mouseDownX; if(newWidth>0) obj.previousSibling.style.width = newWidth; else obj.previousSibling.style.width=1; } function Resize_mouseup(イベント,obj){ if(!isResizing) return; obj.releaseCapture(); isResizing=false; } テーブルスタイル="幅:100%;高さ:100%;" ボーダー=0 セルスペース=0 セルパディング=0px > ; td style="width:150px ;"> onmouseup="Resize_mouseup(event,this);" onmousemove="Resize_mousemove(event,this);">

変更 2:

コードをコピー コードは次のとおりです。 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 events.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; } onmousedown="Resize_mousedown(event,this);" onmouseup="Resize_mouseup(event,this);" onmousemove="Resize_mousemove(event,this);">