资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
拖动层
<html> <head> <title>拖动层</title> <style> td{font-size:12px;} /*模拟窗体*/ .vwin{ position:absolute; border-top: 2px outset buttonhighlight; border-left: 2px outset buttonhighlight; border-bottom: 2px outset buttonshadow; border-right: 2px outset buttonshadow; } .vwintit{height:18px;background-color:#000099;color:#ffffff;font-weight:bold;cursor:move;} .vwinbody{background-color:#D6D3CE;} </style> </head> <body> <table id="win01" class="vwin" width="300" height="200" cellspacing="0" cellpadding="0" border="0"> <tr> <td class="vwintit" forid="win01"> 窗口一</td> </tr> <tr> <td class="vwinbody" forid="win01"> </td> </tr> </table> <table id="win02" class="vwin" width="300" height="200" cellspacing="0" cellpadding="0" border="0"> <tr> <td class="vwintit" forid="win02"> 窗口二</td> </tr> <tr> <td class="vwinbody" forid="win02"> </td> </tr> </table> <table id="win03" class="vwin" width="300" height="200" cellspacing="0" cellpadding="0" border="0"> <tr> <td class="vwintit" forid="win03"> 窗口三</td> </tr> <tr> <td class="vwinbody" forid="win03"> </td> </tr> </table> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%20%20%20%20%2F%2FThis%20javascript%20was%20writen%20by%20dron%20%0D%0A%20%20%20%20var%20md%3Dfalse%2Cmobj%2Cox%2Coy%2Cindex%3D1000%3B%20%0D%0A%20%20%20%20function%20document.onmousedown()%7B%20%0D%0A%20%20%20%20%20%20%20%20winfocus()%3B%20%0D%0A%20%20%20%20%20%20%20%20if(event.srcElement.className%3D%3D%22vwintit%22)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20md%20%3D%20true%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20mobj%20%3D%20document.getElementById(event.srcElement.forid)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20ox%20%3D%20mobj.offsetLeft%20-%20event.x%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20oy%20%3D%20mobj.offsetTop%20-%20event.y%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20document.onmouseup%3Dfunction()%7Bmd%3Dfalse%3B%7D%20%0D%0A%20%20%20%20function%20document.onmousemove()%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20if(md)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20mobj.style.left%20%3D%20event.x%20%2B%20ox%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20mobj.style.top%20%3D%20event.y%20%2B%20oy%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20function%20winfocus()%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20fobj%3Ddocument.getElementById(event.srcElement.forid)%3B%20%0D%0A%20%20%20%20%20%20%20%20if(fobj%3D%3Dnull)%7Breturn%20false%7D%20%0D%0A%20%20%20%20%20%20%20%20if(fobj.style.zIndex!%3Dindex)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20index%20%3D%20index%20%2B%201%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fobj.style.zIndex%3Dindex%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20document.onclick%3Dwinfocus%3B%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程