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 (){ //松開按鈕
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)頁可見區(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)頁可見區(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)頁可見區(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;
//公有屬性，類外可操作；若要在類外操作，可將元素改為公有屬性
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)畫出方框?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)文章
如何利用JSHint減少JavaScript的錯(cuò)誤
JSHint是一個(gè)社區(qū)驅(qū)動(dòng)用來檢測(cè)JavaScript代碼中錯(cuò)誤和潛在的問題以及執(zhí)行團(tuán)隊(duì)的編碼規(guī)范工具。它非常靈活,因此可以很容易地適應(yīng)您特定的編碼規(guī)則和你的代碼執(zhí)行環(huán)境。JSHint將永遠(yuǎn)保持開源的方式。2016-08-08
JavaScript滿天星導(dǎo)航欄實(shí)現(xiàn)方法
本篇文章給大家分享了JavaScript滿天星導(dǎo)航欄實(shí)現(xiàn)方法，以前也介紹過很多關(guān)于特效導(dǎo)航的制作方法，對(duì)此有興趣的朋友參考學(xué)習(xí)下。2018-03-03
微信小程序?qū)崿F(xiàn)發(fā)送短信驗(yàn)證碼倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)發(fā)送短信驗(yàn)證碼倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家介紹了巧妙解決Layui.table組件分頁問題方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
JavaScript實(shí)現(xiàn)自動(dòng)變換表格邊框顏色
用JavaScript控制表格邊框不停的變換顏色,記得以前經(jīng)?？吹竭@種效果,代碼也不復(fù)雜,直接復(fù)制就可用啦! 可自定義顏色，有需要的小伙伴可以參考下。2015-05-05
JS window對(duì)象的top、parent、opener含義介紹
本文為大家介紹下JS window對(duì)象的top、parent、opener含義，不了解的朋友可以參考下，希望對(duì)大家有所幫助2013-12-12
當(dāng)頁面特別長(zhǎng)的時(shí)候，用戶想回到頁面頂部，必須得滾動(dòng)好幾次滾動(dòng)鍵才能回到頂部，如果在頁面右下角有個(gè)“返回頂部”的按鈕，用戶點(diǎn)擊一下，就可以回到頂部，對(duì)于用戶來說，是一個(gè)比較好的體驗(yàn)。2015-05-05
前端JavaScript?6?種主流接口請(qǐng)求技術(shù)全解
這篇文章主要介紹了前端JavaScript?6?種主流接口請(qǐng)求技術(shù)的相關(guān)資料,包括XMLHttpRequest、FetchAPI、Axios、jQueryAjax、WebSocket和GraphQL,并提供了每種方案的基礎(chǔ)用法、高級(jí)配置、優(yōu)點(diǎn)、缺點(diǎn)及適用場(chǎng)景,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
javascript一段創(chuàng)建層的代碼...2007-10-10
JavaScript類型相關(guān)的常用操作總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript類型相關(guān)的常用操作，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02