主頁(yè)面中的兩個(gè)iframe實(shí)現(xiàn)鼠標(biāo)拖動(dòng)改變其大小
更新時(shí)間：2013年04月16日 15:55:19 作者：
iframe實(shí)現(xiàn)鼠標(biāo)拖動(dòng)改變其大小在一個(gè)頁(yè)面中的兩個(gè)iframe的情況下，此方法相當(dāng)實(shí)用，感興趣的各位不妨參考下，或許對(duì)你有所幫助
復(fù)制代碼 代碼如下:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm4.aspx.vb" Inherits="HIG_Receipt.WebForm4"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>WebForm4</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<style type=text/css >
.resizeDivClass{
width:3px;
margin:0px 0 0px 0;
background:#ffff33;
border:5px;
cursor:e-resize;
</style>
<script type=text/javascript language =javascript >
var mousedown=false;
var aaa;
function down() {
mousedown=true;
aaa=event.clientX-td1.offsetWidth;
event.srcElement.setCapture();
}
function move() {
if(mousedown==true){
td1.style.width=Math.max(1,event.clientX-aaa);
}
}
function up() {
event.srcElement.releaseCapture();
mousedown=false;
}
</script>
</head>
<body MS_POSITIONING="GridLayout" >
<TABLE width="100%" height="100%" >
<tr>
<td id="td1" >
第一個(gè)iframe
<iframe style="WIDTH: 100%; HEIGHT: 100%" src="" frameBorder="0">
</iframe>
</td>
<td class="resizeDivClass" onmousedown="down()" onmousemove="move()" onmouseup="up()">
</td>
<td >
第二個(gè)iframe
<iframe style="WIDTH: 100%; HEIGHT: 100%" src="" frameBorder="0">
</iframe>
</td>
</td>
</table>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了JS徹底弄懂GMT和UTC時(shí)區(qū)，對(duì)時(shí)間感興趣的同學(xué)，可以參考下2021-04-04
理解Javascript_08_函數(shù)對(duì)象
如果你無(wú)法理解博文在講什么，請(qǐng)回顧前面的系列博文。文章比較深入，如有不對(duì)之處，望請(qǐng)指正，謝謝。2010-10-10
layui 實(shí)現(xiàn)加載動(dòng)畫(huà)以及非真實(shí)加載進(jìn)度的方法
今天小編就為大家分享一篇layui 實(shí)現(xiàn)加載動(dòng)畫(huà)以及非真實(shí)加載進(jìn)度的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
如何給ListBox添加雙擊事件，想必有很多的新手朋友們都不會(huì)吧，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-12-12
這篇文章主要介紹了一文理解JavaScript裝飾器模式，文章基于JavaScript的相關(guān)資料展開(kāi)詳細(xì)介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)HSL拾色器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了一個(gè)小時(shí)快速搭建微信小程序的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
一文詳解前端進(jìn)階之IntersectionObserver
這篇文章主要為大家介紹了前端進(jìn)階之IntersectionObserver示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
基于JavaScript實(shí)現(xiàn)仿京東圖片輪播效果
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)仿京東圖片輪播效果，代碼簡(jiǎn)單易懂，需要的小伙伴參考下吧2015-11-11
JavaScript實(shí)現(xiàn)圖片偽異步上傳過(guò)程解析
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片偽異步上傳過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04