本文實例講述了JS實作可縮放、拖曳、關閉和最小化的浮動視窗方法。分享給大家供大家參考。具體實作方法如下： 複製程式碼 程式碼如下: JS實作可縮放、拖曳、關閉和最小化的浮動視窗 頭> <br /> .divWindow{自動換行：換行；位置：絕對；溢位：隱藏；}<br /> .divBar{邊框：#000000 1px 實心；位置：絕對；邊框底部：#000000 1px 實心；寬度：100%；高度：20px；背景顏色：#0099FF；遊標：手；線高：20px>； .divChange{位置：絕對；右：25px；字體大小：10pt；}<br /> .divClose{位置：絕對；右：5px；字體大小：11pt；}<br /> .divTitle{位置：絕對；左：5px；字體大小：10pt；空白：nowrap；文字溢位：省略號；-o-文字溢位：省略號；溢位：隱藏；}<br /> .divContent{邊框：#000000 1px 實心；邊框頂部：#000000 0px 實心；位置：絕對；頂部：20px；寬度：100%；背景顏色：#FFFFFF；溢出-y:自動;<br /> 捲軸基礎顏色：#FFFFFF；滾動條箭頭顏色：#999999；滾動條臉部顏色：#EEEEEE；捲軸高亮顏色：#EEEEEE；<br /> 滾動條陰影顏色：#EEEEEE；捲軸3DLIGHT-顏色：#FFFFFF；滾動條軌道顏色：#FFFFFF；捲軸深色陰影顏色：#CCCCCC；}<br /> .divReSize{高度:7px;寬度：7px；溢出：隱藏；背景顏色：#0000FF；位置：絕對；底部：6px；右：6px；遊標：nw-調整大小}<br /> .divIframe{高度:100%;寬度:100%;}<br /> </風格><br /> <腳本語言=“javascript”><br /> var zindex=0 // 全域變數<br /> function DragClass(姓名,標題,內容,左,頂部,寬度,高度){<br /> var isMouseDown=false;<br /> var max=false;<br /> var offX=0; //設定焦點點X座標<br /> var offY=0; //設定焦點點Y座標<br /> var oldLeft; //保持正常狀態的X座標<br /> var oldTop; //保持正常狀態的Y座標<br /> this.mousedown= function (){ //點選拖曳點<br /> Bar.setCapture(); //設定注意力<br /> offX=parseInt(event.clientX)-parseInt(Window.style.left);<br /> offY=parseInt(event.clientY)-parseInt(Window.style.top);<br /> isMouseDown=true;<br /> if(Window.style.zIndex<=zindex){<br /> zindex ;<br /> Window.style.zIndex=zindex;<br /> }<br /> }<br /> this.mousemove= function (){ //拖曳視窗<br /> if (isMouseDown && !max){<br /> Bar.style.cursor='移動'<br /> Window.style.left=event.clientX-offX;<br /> window.style.top=event.clientY-offY;<br /> if(Window.style.zIndex<=zindex){<br /> zindex ;<br /> Window.style.zIndex=zindex;<br /> }<br /> }<br /> }<br /> this.mouseup=function (){ //讀取按鈕<br /> Bar.releaseCapture(); //取消提取<br /> Bar.style.cursor='手';<br /> if (parseInt(Window.style.top)<0){<br /> window.style.top='0px';<br /> }<br /> if (parseInt(Window.style.left)<0){<br /> window.style.left='0px';<br /> }<br /> isMouseDown=false;<br /> }<br /> this.dblclick=function (){ //側壁最大最小化<br /> 如果（！最大）{<br /> oldLeft=Window.style.left; //維持正常狀態的X座標<br /> oldTop=Window.style.top; //維持正常狀態的Y座標<br /> window.style.left='0px';<br /> window.style.top='0px';<br /> window.style.width= document.body.clientWidth; //網頁可見區域寬<br /> Title.style.width=(document.body.clientWidth-40) 'px'; //設定標題長度<br /> ReSize.style.display='無';<br /> if(Change.innerText=='－'){<br /> window.style.height='100%';<br /> Content.style.height=document.body.clientHeight-20; //網頁可見區域寬-標題高度<br /> }其他{<br /> window.style.height='20px';<br /> }<br /> 最大值=true;<br /> }其他{<br /> Window.style.left=oldLeft;<br /> Window.style.top=oldTop;<br /> window.style.width=寬度 'px';<br /> Title.style.width=(width-40) 'px';<br /> ReSize.style.display='';<br /> if(Change.innerText=='－'){<br /> window.style.height=高度 'px';<br /> Content.style.height=parseInt(height-20) 'px';<br /> }其他{<br /> window.style.height='20px';<br /> }<br /> 最大值=假；<br /> }<br /> if(Window.style.zIndex<=zindex){<br /> zindex ;<br /> Window.style.zIndex=zindex;<br /> }<br /> }<br /> this.changeWindow=function (){ // 收縮視窗<br /> event.cancelBubble=true;<br /> if(Change.innerText=='－'){<br /> window.style.height='20px';<br /> Change.innerText='□';<br /> Content.style.display='無';<br /> ReSize.style.display='無';<br /> }其他{<br /> 如果（最大）{<br /> window.style.height='100%';<br /> Content.style.display='';<br /> ReSize.style.display='';<br /> Content.style.height=document.body.clientHeight-20; //網頁可見區域寬-標題高度<br /> }其他{<br /> window.style.height=高度 'px';<br /> Content.style.display='';<br /> ReSize.style.display='';<br /> Content.style.height=parseInt(height-20) 'px';<br /> }<br /> Change.innerText='－';<br /> }<br /> }<p>var Window=document.createElement("div");<br /> Window.id="divWindow" name;<br /> Window.className="divWindow";<br /> Window.style.left=left 'px';<br /> Window.style.top=top 'px';<br /> Window.style.width=width 'px';<br /> Window.style.height=height 'px';<br /> Window.onclick=function(){<br /> if(parseInt(Window.style.zIndex)<=zindex){<br /> zindex ;<br /> Window.style.zIndex=zindex;<br /> }<br /> }<br /> this.Window=Window;<br /> //公有屬性，類別外可操作；若要在類別外操作，可將元素改為公有屬性<br /> <br /> var Bar=document.createElement("div");<br /> Bar.id="divBar" name;<br /> Bar.onselectstart="return false";<br /> Bar.className="divBar";<br /> Bar.onmousedown=this.mousedown;<br /> Bar.ondblclick=this.dblclick;<br /> Bar.onmousemove=this.mousemove;<br /> Bar.onmouseup=this.mouseup;<br /> Window.appendChild(Bar);<br /> var Title=document.createElement("span");<br /> Title.id="divTitle" name;<br /> Title.className="divTitle";<br /> Title.style.width=(width-40) 'px'; //自適應標題長度<br /> Title.innerText=title;<br /> Bar.appendChild(Title);<br /> var Change=document.createElement("span");<br /> Change.id="divChange" name;<br /> Change.className="divChange";<br /> Change.innerText="－";<br /> Change.ondblclick=this.changeWindow;<br /> Change.onclick=this.changeWindow;<br /> Bar.appendChild(Change);<br /> var Close=document.createElement("span");<br /> Close.id="divClose" name;<br /> Close.onclick=function(){<br /> Window.style.display='none';<br /> }<br /> Close.className="divClose";<br /> Close.innerText="×";<br /> Bar.appendChild(Close);<br /> var Content=document.createElement("div");<br /> Content.id="divContent" name;<br /> Content.className="divContent"<br /> Content.innerHTML=content;<br /> Content.style.height=parseInt(height-20) 'px';<br /> Window.appendChild(Content);<br /> <br /> var ReSize=document.createElement("div");<br /> ReSize.className="divReSize";<br /> ReSize.onmousedown=function(){<br /> if(Window.style.zIndex<=zindex){<br /> zindex ;<br /> Window.style.zIndex=zindex;<br /> }<br /> ReSize.setCapture();<br /> isMouseDown=true;<br /> }<br /> ReSize.onmousemove=function(){<br /> if (isMouseDown && !maximum)<br /> {<br /> width=parseInt(event.clientX)-parseInt(Window.style.left) 5;<br /> height=parseInt(event.clientY)-parseInt(Window.style.top) 5;<br /> if(width>100){ //設定最小寬度<br /> Window.style.width=width 'px';<br /> Title.style.width=(width-40) 'px';<br /> }<br /> if(height>100){ //設定最小高度<br /> Window.style.height=height 'px';<br /> Content.style.height=parseInt(height-20) 'px';<br /> }<br /> }<br /> }<br /> ReSize.onmouseup=function(){<br /> ReSize.releaseCapture();<br /> isMouseDown=false;<br /> }<br /> Window.appendChild(ReSize);<br /> var Iframe=document.createElement("iframe"); //新增iframe，IE6.0下遮蔽<select>控制項<br /> Iframe.className="divIframe";<br /> Window.appendChild(Iframe);<br /> <br /> document.body.appendChild(Window);<p>}<br /> <br /> <body><br /> <script><br /> //dragClass(ID,視窗標題,內容,X座標,Y座標,寬,長)<br /> var c1="窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1";<br /> objWin1=new dragClass('win1','拖曳視窗1',c1,0,150,300,300);<br /> var c2="窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2";<br /> objWin2=new dragClass('win2','拖曳視窗2',c2,350,150,300,300);<br /> var objWin3;<br /> function openWin(){<br /> if(objWin3==null){<br /> var c3="123窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3";<br /> objWin3=new dragClass('win3',c3,c3,700,150,300,300);<br /> }else{<br /> if(objWin3.Window.style.display=='none'){<br /> objWin3.Window.style.display='';<br /> }<br /> }<br /> }<br /> <br /> <input type="button" value="彈出【視窗3】" onClick="openWin()" /><br /> <br />
