资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
javascript用层模拟可移动的小窗口
<html> <head> <title>管理资源吧 层模拟小窗口效果代码</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <META NAME="Description" CONTENT="http://www.glzy8.com"> <style type='text/css'> <!-- body{font-size:12px;} a:visited{text-decoration:none;color:slategray;} a:hover{text-decoration:underline;color:slategray;} a:link{text-decoration:none;color:slategray;} --> </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3DJScript%3E%20%0D%0A%3C!--%20%0D%0A%2F%2F%E5%8F%AF%E4%BB%A5%E6%89%93%E5%8C%85%E4%B8%BAjs%E6%96%87%E4%BB%B6%3B%20%0D%0Avar%20x0%3D0%2Cy0%3D0%2Cx1%3D0%2Cy1%3D0%3B%20%0D%0Avar%20offx%3D6%2Coffy%3D6%3B%20%0D%0Avar%20moveable%3Dfalse%3B%20%0D%0Avar%20hover%3D'orange'%2Cnormal%3D'%23336699'%3B%2F%2Fcolor%3B%20%0D%0Avar%20index%3D10000%3B%2F%2Fz-index%3B%20%0D%0A%2F%2F%E5%BC%80%E5%A7%8B%E6%8B%96%E5%8A%A8%3B%20%0D%0Afunction%20startDrag(obj)%20%0D%0A%7B%20%0D%0Aif(event.button%3D%3D1)%20%0D%0A%7B%20%0D%0A%2F%2F%E9%94%81%E5%AE%9A%E6%A0%87%E9%A2%98%E6%A0%8F%3B%20%0D%0Aobj.setCapture()%3B%20%0D%0A%2F%2F%E5%AE%9A%E4%B9%89%E5%AF%B9%E8%B1%A1%3B%20%0D%0Avar%20win%20%3D%20obj.parentNode%3B%20%0D%0Avar%20sha%20%3D%20win.nextSibling%3B%20%0D%0A%2F%2F%E8%AE%B0%E5%BD%95%E9%BC%A0%E6%A0%87%E5%92%8C%E5%B1%82%E4%BD%8D%E7%BD%AE%3B%20%0D%0Ax0%20%3D%20event.clientX%3B%20%0D%0Ay0%20%3D%20event.clientY%3B%20%0D%0Ax1%20%3D%20parseInt(win.style.left)%3B%20%0D%0Ay1%20%3D%20parseInt(win.style.top)%3B%20%0D%0A%2F%2F%E8%AE%B0%E5%BD%95%E9%A2%9C%E8%89%B2%3B%20%0D%0Anormal%20%3D%20obj.style.backgroundColor%3B%20%0D%0A%2F%2F%E6%94%B9%E5%8F%98%E9%A3%8E%E6%A0%BC%3B%20%0D%0Aobj.style.backgroundColor%20%3D%20hover%3B%20%0D%0Awin.style.borderColor%20%3D%20hover%3B%20%0D%0Aobj.nextSibling.style.color%20%3D%20hover%3B%20%0D%0Asha.style.left%20%3D%20x1%20%2B%20offx%3B%20%0D%0Asha.style.top%20%3D%20y1%20%2B%20offy%3B%20%0D%0Amoveable%20%3D%20true%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E6%8B%96%E5%8A%A8%3B%20%0D%0Afunction%20drag(obj)%20%0D%0A%7B%20%0D%0Aif(moveable)%20%0D%0A%7B%20%0D%0Avar%20win%20%3D%20obj.parentNode%3B%20%0D%0Avar%20sha%20%3D%20win.nextSibling%3B%20%0D%0Awin.style.left%20%3D%20x1%20%2B%20event.clientX%20-%20x0%3B%20%0D%0Awin.style.top%20%3D%20y1%20%2B%20event.clientY%20-%20y0%3B%20%0D%0Asha.style.left%20%3D%20parseInt(win.style.left)%20%2B%20offx%3B%20%0D%0Asha.style.top%20%3D%20parseInt(win.style.top)%20%2B%20offy%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E5%81%9C%E6%AD%A2%E6%8B%96%E5%8A%A8%3B%20%0D%0Afunction%20stopDrag(obj)%20%0D%0A%7B%20%0D%0Aif(moveable)%20%0D%0A%7B%20%0D%0Avar%20win%20%3D%20obj.parentNode%3B%20%0D%0Avar%20sha%20%3D%20win.nextSibling%3B%20%0D%0Avar%20msg%20%3D%20obj.nextSibling%3B%20%0D%0Awin.style.borderColor%20%3D%20normal%3B%20%0D%0Aobj.style.backgroundColor%20%3D%20normal%3B%20%0D%0Amsg.style.color%20%3D%20normal%3B%20%0D%0Asha.style.left%20%3D%20obj.parentNode.style.left%3B%20%0D%0Asha.style.top%20%3D%20obj.parentNode.style.top%3B%20%0D%0Aobj.releaseCapture()%3B%20%0D%0Amoveable%20%3D%20false%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E8%8E%B7%E5%BE%97%E7%84%A6%E7%82%B9%3B%20%0D%0Afunction%20getFocus(obj)%20%0D%0A%7B%20%0D%0Aif(obj.style.zIndex!%3Dindex)%20%0D%0A%7B%20%0D%0Aindex%20%3D%20index%20%2B%202%3B%20%0D%0Avar%20idx%20%3D%20index%3B%20%0D%0Aobj.style.zIndex%3Didx%3B%20%0D%0Aobj.nextSibling.style.zIndex%3Didx-1%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E6%9C%80%E5%B0%8F%E5%8C%96%3B%20%0D%0Afunction%20min(obj)%20%0D%0A%7B%20%0D%0Avar%20win%20%3D%20obj.parentNode.parentNode%3B%20%0D%0Avar%20sha%20%3D%20win.nextSibling%3B%20%0D%0Avar%20tit%20%3D%20obj.parentNode%3B%20%0D%0Avar%20msg%20%3D%20tit.nextSibling%3B%20%0D%0Avar%20flg%20%3D%20msg.style.display%3D%3D%22none%22%3B%20%0D%0Aif(flg)%20%0D%0A%7B%20%0D%0Awin.style.height%20%3D%20parseInt(msg.style.height)%20%2B%20parseInt(tit.style.height)%20%2B%202*2%3B%20%0D%0Asha.style.height%20%3D%20win.style.height%3B%20%0D%0Amsg.style.display%20%3D%20%22block%22%3B%20%0D%0Aobj.innerHTML%20%3D%20%220%22%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Awin.style.height%20%3D%20parseInt(tit.style.height)%20%2B%202*2%3B%20%0D%0Asha.style.height%20%3D%20win.style.height%3B%20%0D%0Aobj.innerHTML%20%3D%20%222%22%3B%20%0D%0Amsg.style.display%20%3D%20%22none%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%3B%20%0D%0Afunction%20xWin(id%2Cw%2Ch%2Cl%2Ct%2Ctit%2Cmsg)%20%0D%0A%7B%20%0D%0Aindex%20%3D%20index%2B2%3B%20%0D%0Athis.id%20%3D%20id%3B%20%0D%0Athis.width%20%3D%20w%3B%20%0D%0Athis.height%20%3D%20h%3B%20%0D%0Athis.left%20%3D%20l%3B%20%0D%0Athis.top%20%3D%20t%3B%20%0D%0Athis.zIndex%20%3D%20index%3B%20%0D%0Athis.title%20%3D%20tit%3B%20%0D%0Athis.message%20%3D%20msg%3B%20%0D%0Athis.obj%20%3D%20null%3B%20%0D%0Athis.bulid%20%3D%20bulid%3B%20%0D%0Athis.bulid()%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E5%88%9D%E5%A7%8B%E5%8C%96%3B%20%0D%0Afunction%20bulid()%20%0D%0A%7B%20%0D%0Avar%20str%20%3D%20%22%22%20%0D%0A%2B%20%22%3Cdiv%20id%3DxMsg%22%20%2B%20this.id%20%2B%20%22%20%22%20%0D%0A%2B%20%22style%3D'%22%20%0D%0A%2B%20%22z-index%3A%22%20%2B%20this.zIndex%20%2B%20%22%3B%22%20%0D%0A%2B%20%22width%3A%22%20%2B%20this.width%20%2B%20%22%3B%22%20%0D%0A%2B%20%22height%3A%22%20%2B%20this.height%20%2B%20%22%3B%22%20%0D%0A%2B%20%22left%3A%22%20%2B%20this.left%20%2B%20%22%3B%22%20%0D%0A%2B%20%22top%3A%22%20%2B%20this.top%20%2B%20%22%3B%22%20%0D%0A%2B%20%22background-color%3A%22%20%2B%20normal%20%2B%20%22%3B%22%20%0D%0A%2B%20%22color%3A%22%20%2B%20normal%20%2B%20%22%3B%22%20%0D%0A%2B%20%22font-size%3A8pt%3B%22%20%0D%0A%2B%20%22font-family%3ATahoma%3B%22%20%0D%0A%2B%20%22position%3Aabsolute%3B%22%20%0D%0A%2B%20%22cursor%3Adefault%3B%22%20%0D%0A%2B%20%22border%3A2px%20solid%20%22%20%2B%20normal%20%2B%20%22%3B%22%20%0D%0A%2B%20%22'%20%22%20%0D%0A%2B%20%22onmousedown%3D'getFocus(this)'%3E%22%20%0D%0A%2B%20%22%3Cdiv%20%22%20%0D%0A%2B%20%22style%3D'%22%20%0D%0A%2B%20%22background-color%3A%22%20%2B%20normal%20%2B%20%22%3B%22%20%0D%0A%2B%20%22width%3A%22%20%2B%20(this.width-2*2)%20%2B%20%22%3B%22%20%0D%0A%2B%20%22height%3A20%3B%22%20%0D%0A%2B%20%22color%3Awhite%3B%22%20%0D%0A%2B%20%22'%20%22%20%0D%0A%2B%20%22onmousedown%3D'startDrag(this)'%20%22%20%0D%0A%2B%20%22onmouseup%3D'stopDrag(this)'%20%22%20%0D%0A%2B%20%22onmousemove%3D'drag(this)'%20%22%20%0D%0A%2B%20%22ondblclick%3D'min(this.childNodes%5B1%5D)'%22%20%0D%0A%2B%20%22%3E%22%20%0D%0A%2B%20%22%3Cspan%20style%3D'width%3A%22%20%2B%20(this.width-2*12-4)%20%2B%20%22%3Bpadding-left%3A3px%3B'%3E%22%20%2B%20this.title%20%2B%20%22%3C%2Fspan%3E%22%20%0D%0A%2B%20%22%3Cspan%20style%3D'width%3A12%3Bborder-width%3A0px%3Bcolor%3Awhite%3Bfont-family%3Awebdings%3B'%20onclick%3D'min(this)'%3E0%3C%2Fspan%3E%22%20%0D%0A%2B%20%22%3Cspan%20style%3D'width%3A12%3Bborder-width%3A0px%3Bcolor%3Awhite%3Bfont-family%3Awebdings%3B'%20onclick%3D'ShowHide(%5C%22%22%2Bthis.id%2B%22%5C%22%2Cnull)'%3Er%3C%2Fspan%3E%22%20%0D%0A%2B%20%22%3C%2Fdiv%3E%22%20%0D%0A%2B%20%22%3Cdiv%20style%3D'%22%20%0D%0A%2B%20%22width%3A100%25%3B%22%20%0D%0A%2B%20%22height%3A%22%20%2B%20(this.height-20-4)%20%2B%20%22%3B%22%20%0D%0A%2B%20%22background-color%3Awhite%3B%22%20%0D%0A%2B%20%22line-height%3A14px%3B%22%20%0D%0A%2B%20%22word-break%3Abreak-all%3B%22%20%0D%0A%2B%20%22padding%3A3px%3B%22%20%0D%0A%2B%20%22'%3E%22%20%2B%20this.message%20%2B%20%22%3C%2Fdiv%3E%22%20%0D%0A%2B%20%22%3C%2Fdiv%3E%22%20%0D%0A%2B%20%22%3Cdiv%20id%3DxMsg%22%20%2B%20this.id%20%2B%20%22bg%20style%3D'%22%20%0D%0A%2B%20%22width%3A%22%20%2B%20this.width%20%2B%20%22%3B%22%20%0D%0A%2B%20%22height%3A%22%20%2B%20this.height%20%2B%20%22%3B%22%20%0D%0A%2B%20%22top%3A%22%20%2B%20this.top%20%2B%20%22%3B%22%20%0D%0A%2B%20%22left%3A%22%20%2B%20this.left%20%2B%20%22%3B%22%20%0D%0A%2B%20%22z-index%3A%22%20%2B%20(this.zIndex-1)%20%2B%20%22%3B%22%20%0D%0A%2B%20%22position%3Aabsolute%3B%22%20%0D%0A%2B%20%22background-color%3Ablack%3B%22%20%0D%0A%2B%20%22filter%3Aalpha(opacity%3D40)%3B%22%20%0D%0A%2B%20%22'%3E%3C%2Fdiv%3E%22%3B%20%0D%0Adocument.body.insertAdjacentHTML(%22beforeEnd%22%2Cstr)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E6%98%BE%E7%A4%BA%E9%9A%90%E8%97%8F%E7%AA%97%E5%8F%A3%20%0D%0Afunction%20ShowHide(id%2Cdis)%7B%20%0D%0Avar%20bdisplay%20%3D%20(dis%3D%3Dnull)%3F((document.getElementById(%22xMsg%22%2Bid).style.display%3D%3D%22%22)%3F%22none%22%3A%22%22)%3Adis%20%0D%0Adocument.getElementById(%22xMsg%22%2Bid).style.display%20%3D%20bdisplay%3B%20%0D%0Adocument.getElementById(%22xMsg%22%2Bid%2B%22bg%22).style.display%20%3D%20bdisplay%3B%20%0D%0A%7D%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D'JScript'%3E%20%0D%0A%3C!--%20%0D%0Afunction%20initialize()%20%0D%0A%7B%20%0D%0Avar%20a%20%3D%20new%20xWin(%221%22%2C160%2C200%2C200%2C200%2C%22%E7%AA%97%E5%8F%A31%22%2C%22xWin%20%0D%0A%20A%20Cool%20Pop%20Div%20Window%0D%0Achinaz.com%0D%0Achinaz.com%22)%3B%20%0D%0Avar%20b%20%3D%20new%20xWin(%222%22%2C240%2C200%2C100%2C100%2C%22%E7%AA%97%E5%8F%A32%22%2C%22Welcome%20to%20%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6%3A%0D%0A%3Ca%20href%3Dhttp%3A%2F%2Fwww.glzy8.com%20target%3D_blank%3Ehttp%3A%2F%2Fwww.glzy8.com%3C%2Fa%3E%0D%0A%E8%AF%B7%E5%A4%9A%E6%8F%90%E5%BB%BA%E8%AE%AE%E5%99%A2%0D%0A%0D%0A%E6%84%9F%E8%B0%A2%E6%82%A8%E7%9A%84%E5%85%B3%E6%B3%A8%EF%BC%81%22)%3B%20%20%0D%0Avar%20c%20%3D%20new%20xWin(%223%22%2C200%2C160%2C250%2C50%2C%22%E7%AA%97%E5%8F%A33%22%2C%22Copyright%20by%20%3Ca%20href%3D'%23'%3Echinaz.com%3C%2Fa%3E!%22)%3B%20%0D%0AShowHide(%221%22%2C%22none%22)%3B%2F%2F%E9%9A%90%E8%97%8F%E7%AA%97%E5%8F%A31%20%0D%0A%7D%20%0D%0Awindow.onload%20%3D%20initialize%3B%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> </head> <base target="_blank"> <body onselectstart='return false' oncontextmenu='return false' > <a onclick="ShowHide('1',null);return false;" href="" _ewebeditor_ta_href="">窗口1</a> <a onclick="ShowHide('2',null);return false;" href="" _ewebeditor_ta_href="">窗口2</a> <a onclick="ShowHide('3',null);return false;" href="" _ewebeditor_ta_href="">窗口3</a> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程