JS實(shí)現(xiàn)可縮放、拖動(dòng)、關(guān)閉和最小化的浮動(dòng)窗口完整實(shí)例
本文實(shí)例講述了JS實(shí)現(xiàn)可縮放、拖動(dòng)、關(guān)閉和最小化的浮動(dòng)窗口方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS實(shí)現(xiàn)可縮放、拖動(dòng)、關(guān)閉和最小化的浮動(dòng)窗口</title>
</head>
<style type="text/css">
.divWindow{word-wrap:break-word;position:absolute; overflow:hidden;}
.divBar{border:#000000 1px solid;position:absolute;border-bottom:#000000 1px solid;width:100%;height:20px;background-color:#0099FF;cursor:hand;line-height:20px;}
.divChange{position:absolute;right:25px;font-size:10pt;}
.divClose{position:absolute;right:5px;font-size:11pt;}
.divTitle{position:absolute;left:5px;font-size:10pt;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow: hidden;}
.divContent{border:#000000 1px solid;border-top:#000000 0px solid;position:absolute; top:20px;width:100%; background-color:#FFFFFF; overflow-y:auto;
SCROLLBAR-BASE-COLOR: #FFFFFF;SCROLLBAR-ARROW-COLOR: #999999;SCROLLBAR-FACE-COLOR: #EEEEEE;SCROLLBAR-HIGHLIGHT-COLOR: #EEEEEE;
SCROLLBAR-SHADOW-COLOR: #EEEEEE;SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;SCROLLBAR-TRACK-COLOR: #FFFFFF;SCROLLBAR-DARKSHADOW-COLOR: #CCCCCC;}
.divReSize{height:7px; width:7px; overflow:hidden; background-color:#0000FF; position:absolute; bottom:6px; right:6px; cursor:nw-resize}
.divIframe{height:100%;width:100%;}
</style>
<script language="javascript">
var zindex=0 //全局變量
function dragClass(name,title,content,left,top,width,height){
var isMouseDown=false;
var maximum=false;
var offX=0; //設(shè)置抓取點(diǎn)X坐標(biāo)
var offY=0; //設(shè)置抓取點(diǎn)Y坐標(biāo)
var oldLeft; //保存正常狀態(tài)的X坐標(biāo)
var oldTop; //保存正常狀態(tài)的Y坐標(biāo)
this.mousedown= function (){ //按下拖動(dòng)點(diǎn)
Bar.setCapture(); //設(shè)置抓取
offX=parseInt(event.clientX)-parseInt(Window.style.left);
offY=parseInt(event.clientY)-parseInt(Window.style.top);
isMouseDown=true;
if(Window.style.zIndex<=zindex){
zindex++;
Window.style.zIndex=zindex;
}
}
this.mousemove= function (){ //拖動(dòng)窗口
if (isMouseDown && !maximum){
Bar.style.cursor='move'
Window.style.left=event.clientX-offX;
Window.style.top=event.clientY-offY;
if(Window.style.zIndex<=zindex){
zindex++;
Window.style.zIndex=zindex;
}
}
}
this.mouseup=function (){ //松開(kāi)按鈕
Bar.releaseCapture(); //取消抓取
Bar.style.cursor='hand';
if (parseInt(Window.style.top)<0){
Window.style.top='0px';
}
if (parseInt(Window.style.left)<0){
Window.style.left='0px';
}
isMouseDown=false;
}
this.dblclick=function (){ //雙擊最大最小化
if (!maximum){
oldLeft=Window.style.left; //保存正常狀態(tài)的X坐標(biāo)
oldTop=Window.style.top; //保存正常狀態(tài)的Y坐標(biāo)
Window.style.left='0px';
Window.style.top='0px';
Window.style.width= document.body.clientWidth; //網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?br /> Title.style.width=(document.body.clientWidth-40)+'px'; //設(shè)置標(biāo)題長(zhǎng)度
ReSize.style.display='none';
if(Change.innerText=='－'){
Window.style.height='100%';
Content.style.height=document.body.clientHeight-20; //網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?標(biāo)題高度
}else{
Window.style.height='20px';
}
maximum=true;
}else{
Window.style.left=oldLeft;
Window.style.top=oldTop;
Window.style.width=width+'px';
Title.style.width=(width-40)+'px';
ReSize.style.display='';
if(Change.innerText=='－'){
Window.style.height=height+'px';
Content.style.height=parseInt(height-20)+'px';
}else{
Window.style.height='20px';
}
maximum=false;
}
if(Window.style.zIndex<=zindex){
zindex++;
Window.style.zIndex=zindex;
}
}
this.changeWindow=function (){ //收縮窗口
event.cancelBubble=true;
if(Change.innerText=='－'){
Window.style.height='20px';
Change.innerText='□';
Content.style.display='none';
ReSize.style.display='none';
}else{
if (maximum){
Window.style.height='100%';
Content.style.display='';
ReSize.style.display='';
Content.style.height=document.body.clientHeight-20; //網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?標(biāo)題高度
}else{
Window.style.height=height+'px';
Content.style.display='';
ReSize.style.display='';
Content.style.height=parseInt(height-20)+'px';
}
Change.innerText='－';
}
}
var Window=document.createElement("div");
Window.id="divWindow"+ name;
Window.className="divWindow";
Window.style.left=left+'px';
Window.style.top=top+'px';
Window.style.width=width+'px';
Window.style.height=height+'px';
Window.onclick=function(){
if(parseInt(Window.style.zIndex)<=zindex){
zindex++;
Window.style.zIndex=zindex;
}
}
this.Window=Window;
//公有屬性，類(lèi)外可操作；若要在類(lèi)外操作，可將元素改為公有屬性
var Bar=document.createElement("div");
Bar.id="divBar"+name;
Bar.onselectstart="return false";
Bar.className="divBar";
Bar.onmousedown=this.mousedown;
Bar.ondblclick=this.dblclick;
Bar.onmousemove=this.mousemove;
Bar.onmouseup=this.mouseup;
Window.appendChild(Bar);
var Title=document.createElement("span");
Title.id="divTitle"+ name;
Title.className="divTitle";
Title.style.width=(width-40)+'px'; //自適應(yīng)標(biāo)題長(zhǎng)度
Title.innerText=title;
Bar.appendChild(Title);
var Change=document.createElement("span");
Change.id="divChange"+ name;
Change.className="divChange";
Change.innerText="－";
Change.ondblclick=this.changeWindow;
Change.onclick=this.changeWindow;
Bar.appendChild(Change);
var Close=document.createElement("span");
Close.id="divClose"+ name;
Close.onclick=function(){
Window.style.display='none';
}
Close.className="divClose";
Close.innerText="×";
Bar.appendChild(Close);
var Content=document.createElement("div");
Content.id="divContent"+ name;
Content.className="divContent"
Content.innerHTML=content;
Content.style.height=parseInt(height-20)+'px';
Window.appendChild(Content);
var ReSize=document.createElement("div");
ReSize.className="divReSize";
ReSize.onmousedown=function(){
if(Window.style.zIndex<=zindex){
zindex++;
Window.style.zIndex=zindex;
}
ReSize.setCapture();
isMouseDown=true;
}
ReSize.onmousemove=function(){
if (isMouseDown && !maximum)
{
width=parseInt(event.clientX)-parseInt(Window.style.left)+5;
height=parseInt(event.clientY)-parseInt(Window.style.top)+5;
if(width>100){ //設(shè)置最小寬度
Window.style.width=width+'px';
Title.style.width=(width-40)+'px';
}
if(height>100){ //設(shè)置最小高度
Window.style.height=height+'px';
Content.style.height=parseInt(height-20)+'px';
}
}
}
ReSize.onmouseup=function(){
ReSize.releaseCapture();
isMouseDown=false;
}
Window.appendChild(ReSize);
var Iframe=document.createElement("iframe"); //添加iframe，IE6.0下遮擋<select>控件
Iframe.className="divIframe";
Window.appendChild(Iframe);
document.body.appendChild(Window);
}
</script>
<body>
<script>
//dragClass(ID,窗口標(biāo)題,內(nèi)容,X坐標(biāo),Y坐標(biāo),寬,長(zhǎng))
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";
objWin1=new dragClass('win1','拖動(dòng)窗口1',c1,0,150,300,300);
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";
objWin2=new dragClass('win2','拖動(dòng)窗口2',c2,350,150,300,300);
var objWin3;
function openWin(){
if(objWin3==null){
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";
objWin3=new dragClass('win3',c3,c3,700,150,300,300);
}else{
if(objWin3.Window.style.display=='none'){
objWin3.Window.style.display='';
}
}
}
</script>
<input type="button" value="彈出【窗口3】" onClick="openWin()" />
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- js 鼠標(biāo)拖動(dòng)對(duì)象 可讓任何div實(shí)現(xiàn)拖動(dòng)效果
- javascript 事件處理、鼠標(biāo)拖動(dòng)效果實(shí)現(xiàn)方法詳解
- js實(shí)現(xiàn)可拖動(dòng)DIV的方法
- 比較精簡(jiǎn)的Javascript拖動(dòng)效果函數(shù)代碼
- JS實(shí)現(xiàn)彈出浮動(dòng)窗口(支持鼠標(biāo)拖動(dòng)和關(guān)閉)實(shí)例詳解
- js實(shí)現(xiàn)懸浮窗效果(支持拖動(dòng))
- js實(shí)現(xiàn)圖片拖動(dòng)改變順序附圖
- JS拖動(dòng)鼠標(biāo)畫(huà)出方框?qū)崿F(xiàn)鼠標(biāo)選區(qū)的方法
- 鼠標(biāo)拖動(dòng)動(dòng)態(tài)改變表格的寬度的js腳本 兼容ie/firefox
- JS實(shí)現(xiàn)音量控制拖動(dòng)
相關(guān)文章
微信小程序?qū)崿F(xiàn)簡(jiǎn)單計(jì)算器與秒表
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單計(jì)算器與秒表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了js帶縮略圖的圖片輪播效果，圖片輪播效果特別適合做產(chǎn)品展示，感興趣的小伙伴可以參考下。2015-09-09
js select實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)選擇
這篇文章主要為大家詳細(xì)介紹了js select實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)選擇效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了JavaScript Ajax編程之應(yīng)用篇，感興趣的朋友可以參考一下2016-07-07
JavaScript實(shí)現(xiàn)驗(yàn)證碼案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)驗(yàn)證碼案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
關(guān)于javascript event flow 的一個(gè)bug詳解
描述了firefox，safari 有一個(gè)bug和DOM 3 規(guī)范不一致：在event.currentTarget等于event.target的時(shí)候（即event flow處于target phase時(shí)），會(huì)調(diào)用添加到currentTarget上的useCapture為true的listener2013-09-09
關(guān)于JS中的方法是否加括號(hào)的問(wèn)題
在我們js編寫(xiě)程序的時(shí)候，我們會(huì)寫(xiě)很多函數(shù)然后調(diào)用它們，那么這些函數(shù)調(diào)用的時(shí)候什么時(shí)候加()什么時(shí)候不加()呢？下面小編給大家簡(jiǎn)單介紹下2016-07-07
JavaScript 中調(diào)用 Kotlin 方法實(shí)例詳解
這篇文章主要介紹了JavaScript 中調(diào)用 Kotlin 方法實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
小程序?qū)崿F(xiàn)瀑布流動(dòng)態(tài)加載列表
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)瀑布流動(dòng)態(tài)加載列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07