Js模拟Win窗口，可拖动、改变大小、内容自适应。兼容FF火狐，可拖动窗口移动位置，可拖动改变窗口大小，而且外观美化较简洁，漂亮，兼容性当然就不用提了，相当不错。 演示代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /><br /> <title>窗口模拟--Author:Vibo Email:vibo_cn@hotmail.com</title><br /> <style type="text/css"><br /> <!--<br /> body,td,th {<br /> font-family: Arial, 宋体;<br /> font-size: 12px;<br /> }<br /> .webWinFrame {<br /> position: absolute;<br /> left:15px;<br /> top:15px;<br /> padding: 3px;<br /> background-color: #EEEEEE;<br /> }<br /> .webWin {<br /> width: 300px;<br /> border: 1px solid #80C65A;<br /> background-color: #FFFFFF;<br /> }<br /> .webWin .wTitle{<br /> line-height: 18px;<br /> padding: 2px;<br /> font-weight: bold;<br /> cursor:move;<br /> background-color: #DDF8CC;<br /> /*display:inline-block;*/<br /> white-space: nowrap;<br /> overflow:hidden;<br /> text-overflow:ellipsis<br /> }<br /> .webWin .wContent {<br /> overflow:hidden;<br /> }<br /> .webWin .wResizeBox {<br /> background-color: #80C65A;<br /> height: 5px;<br /> width: 5px;<br /> position: absolute;<br /> right: 5px;<br /> bottom: 5px;<br /> overflow:hidden;<br /> cursor:se-resize;<br /> }<br /> body {<br /> margin-left: 0px;<br /> margin-top: 0px;<br /> margin-right: 0px;<br /> margin-bottom: 0px;<br /> }<br /> --><br /> </style><br /> </head><br /> <body><br /> <div class="webWinFrame" id="testWinA"><div class="webWin"><div class="wTitle">TitleA-ViboStudio</div><div class="wContent"><br /> <!----><br /> <div style="width:300px;height:200px;padding:2px;"><br /> 此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br><br /> 此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br><br /> 此处显示新 Div 标签的内容<br><br /> 此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br><br /> 此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br><br /> 此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br><br /> 此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br><br /> </div><br /> <!----><br /> </div><div class="wResizeBox"></div></div></div><br /> <div class="webWinFrame" id="testWinB" style="top:110px;"><div class="webWin"><div class="wTitle">TitleB</div><div class="wContent"><br /> <!----><br /> 此处显示新 Div 标签的内容<br /> 此处显示新 Div 标签的内容<br /> 此处显示新 Div 标签的内容<br /> 资源来自：烈火学院 veryhuo.com<br /> <!----><br /> </div><div class="wResizeBox"></div></div></div><br /> </body><br /> </html><br /> <script><br /> window.$ = function(obj){return (document.getElementById)?document.getElementById(obj):(document.all)?document.all[obj]:obj}<br /> window.isIE = window.Event?false:true;<br /> 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};}<br /> window.vWinZIndex = 1;<br /> function vDrag(o,ho,initArr){<br /> ho=ho||o;<br /> o.style.position="absolute";<br /> if(!isIE){ho.firstChild.onmousedown=function(){return false;}}<br /> ho.onmousedown=function(a){<br /> o.style.zIndex = window.vWinZIndex;<br /> window.vWinZIndex++;<br /> var d=document;if(!a)a=window.event;<br /> var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;<br /> if(ho.setCapture)<br /> ho.setCapture();<br /> else if(window.captureEvents)<br /> window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br /> d.onmousemove=function(a){<br /> if(!a)a=window.event;<br /> var mus=getMouseCoords(a)<br /> if(!a.pageX)a.pageX=mus.x;<br /> if(!a.pageY)a.pageY=mus.y;<br /> var tx=a.pageX-x,ty=a.pageY-y;<br /> if(initArr){<br /> o.style.left=(tx<initArr[0]?initArr[0]:tx>initArr[2]?initArr[2]:tx)+"px";<br /> o.style.top=(ty<initArr[1]?initArr[1]:ty>initArr[3]?initArr[3]:ty)+"px";<br /> }else{<br /> o.style.left = tx+"px";<br /> o.style.top = ty+"px";<br /> }<br /> };<br /> d.onmouseup=function(){<br /> if(ho.releaseCapture)<br /> ho.releaseCapture();<br /> else if(window.captureEvents)<br /> window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br /> d.onmousemove=null;<br /> d.onmouseup=null;<br /> };<br /> };<br /> }<br /> function createWebWindow(o,intW,intH){<br /> o.style.zIndex = window.vWinZIndex;<br /> window.vWinZIndex++;<br /> var winSelf = o.childNodes[0];<br /> var winTitle = o.childNodes[0].childNodes[0];<br /> var winContent = o.childNodes[0].childNodes[1];<br /> var winDbox = o.childNodes[0].childNodes[2];<br /> var minW =50,minH = 40;<br /> var _self = this;<br /> var wX = winSelf.offsetWidth-winContent.offsetWidth;<br /> var wH = winSelf.offsetHeight-winContent.offsetHeight;<br /> winDbox.onmousedown = function(e){<br /> o.style.zIndex = window.vWinZIndex;<br /> window.vWinZIndex++;<br /> var d=document;if(!e)e=window.event;<br /> var x=e.layerX?e.layerX:e.offsetX,y=e.layerY?e.layerY:e.offsetY;<br /> var MCD=window.getMouseCoords(e)<br /> winSelf.startX=MCD.x;<br /> winSelf.startY=MCD.y;<br /> winSelf.startW=winSelf.offsetWidth;<br /> winSelf.startH=winSelf.offsetHeight;<br /> if(winDbox.setCapture)<br /> winDbox.setCapture();<br /> else if(window.captureEvents)<br /> window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br /> d.onmousemove =function(e){<br /> if(!e)e=window.event;<br /> var mus=getMouseCoords(e)<br /> var newW = (winSelf.startW +(mus.x-winSelf.startX));<br /> var newH = (winSelf.startH +(mus.y-winSelf.startY))<br /> resizeWin(newW,newH);<br /> }<br /> d.onmouseup=function(){<br /> if(winDbox.releaseCapture)<br /> winDbox.releaseCapture();<br /> else if(window.captureEvents)<br /> window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br /> d.onmousemove=null;<br /> d.onmouseup=null;<br /> }<br /> }<br /> // 烈火網 VeryHuo.Com 欢迎复制,拒绝恶意采集 ｌｉｅｈｕｏ．ｎｅｔ<br /> function resizeWin(newW,newH){<br /> newW = newW < minW?minW:newW;<br /> newH = newH < minH?minH:newH;<br /> winSelf.style.width = newW+"px";<br /> winSelf.style.height = newH+"px";<br /> winTitle.style.width = isIE?newW+"px":(newW-4)+"px";<br /> winContent.style.width = (newW-wX)+"px";<br /> winContent.style.height = (newH-wH)+"px";<br /> }<br /> {<br /> resizeWin(intW,intH);<br /> vDrag(o,winTitle);<br /> }<br /> }<br /> createWebWindow($("testWinA"),300,75);<br /> createWebWindow($("testWinB"),300,100);<br /> </script> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示：可修改后代码再运行! 文章导航 CSS解决div总是被select遮挡问题的实例CSS布局实例：头部和左右两列的常规代码
