Js模拟Win窗口，可拖动、改变大

发布时间：2018-10-14 17:39:24 所属栏目：活动来源：站长网

导读：Js模拟Win窗口，可拖动、改变大

　　Js模拟Win窗口，可拖动、改变大小、内容自适应。兼容FF火狐，可拖动窗口移动位置，可拖动改变窗口大小，而且外观美化较简洁，漂亮，兼容性当然就不用提了，相当不错。

　　演示代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>窗口模拟--Author:Vibo Email:vibo_cn@hotmail.com</title> <style type="text/css">  </style> </head> <body> <div class="webWinFrame" id="testWinA"><div class="webWin"><div class="wTitle">TitleA-ViboStudio</div><div class="wContent">  <div style="width:300px;height:200px;padding:2px;"> 此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br> 此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br> 此处显示新 Div 标签的内容<br> 此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br> 此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br> 此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br> 此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br> </div>  </div><div class="wResizeBox"></div></div></div> <div class="webWinFrame" id="testWinB" style="top:110px;"><div class="webWin"><div class="wTitle">TitleB</div><div class="wContent">  此处显示新 Div 标签的内容此处显示新 Div 标签的内容此处显示新 Div 标签的内容资源来自：烈火学院 veryhuo.com  </div><div class="wResizeBox"></div></div></div> </body> </html> <script> window.$ = function(obj){return (document.getElementById)?document.getElementById(obj):(document.all)?document.all[obj]:obj} window.isIE = window.Event?false:true; window.getMouseCoords=function(e){return {x:isIE?e.clientX+Math.max(document.body.scrollLeft, document.documentElement.scrollLeft):e.pageX,y:isIE?e.clientY+Math.max(document.body.scrollTop, document.documentElement.scrollTop):e.pageY};} window.vWinZIndex = 1; function vDrag(o,ho,initArr){ ho=ho||o; o.style.position="absolute"; if(!isIE){ho.firstChild.onmousedown=function(){return false;}} ho.onmousedown=function(a){ o.style.zIndex = window.vWinZIndex; window.vWinZIndex++; var d=document;if(!a)a=window.event; var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY; if(ho.setCapture) ho.setCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); d.onmousemove=function(a){ if(!a)a=window.event; var mus=getMouseCoords(a) if(!a.pageX)a.pageX=mus.x; if(!a.pageY)a.pageY=mus.y; var tx=a.pageX-x,ty=a.pageY-y; if(initArr){ o.style.left=(tx<initArr[0]?initArr[0]:tx>initArr[2]?initArr[2]:tx)+"px"; o.style.top=(ty<initArr[1]?initArr[1]:ty>initArr[3]?initArr[3]:ty)+"px"; }else{ o.style.left = tx+"px"; o.style.top = ty+"px"; } }; d.onmouseup=function(){ if(ho.releaseCapture) ho.releaseCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); d.onmousemove=null; d.onmouseup=null; }; }; } function createWebWindow(o,intW,intH){ o.style.zIndex = window.vWinZIndex; window.vWinZIndex++; var winSelf = o.childNodes[0]; var winTitle = o.childNodes[0].childNodes[0]; var winContent = o.childNodes[0].childNodes[1]; var winDbox = o.childNodes[0].childNodes[2]; var minW =50,minH = 40; var _self = this; var wX = winSelf.offsetWidth-winContent.offsetWidth; var wH = winSelf.offsetHeight-winContent.offsetHeight; winDbox.onmousedown = function(e){ o.style.zIndex = window.vWinZIndex; window.vWinZIndex++; var d=document;if(!e)e=window.event; var x=e.layerX?e.layerX:e.offsetX,y=e.layerY?e.layerY:e.offsetY; var MCD=window.getMouseCoords(e) winSelf.startX=MCD.x; winSelf.startY=MCD.y; winSelf.startW=winSelf.offsetWidth; winSelf.startH=winSelf.offsetHeight; if(winDbox.setCapture) winDbox.setCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); d.onmousemove =function(e){ if(!e)e=window.event; var mus=getMouseCoords(e) var newW = (winSelf.startW +(mus.x-winSelf.startX)); var newH = (winSelf.startH +(mus.y-winSelf.startY)) resizeWin(newW,newH); } d.onmouseup=function(){ if(winDbox.releaseCapture) winDbox.releaseCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); d.onmousemove=null; d.onmouseup=null; } } // 烈火網 VeryHuo.Com 欢迎复制,拒绝恶意采集ｌｉｅｈｕｏ．ｎｅｔ function resizeWin(newW,newH){ newW = newW < minW?minW:newW; newH = newH < minH?minH:newH; winSelf.style.width = newW+"px"; winSelf.style.height = newH+"px"; winTitle.style.width = isIE?newW+"px":(newW-4)+"px"; winContent.style.width = (newW-wX)+"px"; winContent.style.height = (newH-wH)+"px"; } { resizeWin(intW,intH); vDrag(o,winTitle); } } createWebWindow($("testWinA"),300,75); createWebWindow($("testWinB"),300,100); </script> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：晋江门户网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!