拖动层_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:33:42

拖动层_javascript技巧

拖动层_javascript技巧: 拖动层 td{font-size:12px;} /*模拟窗体*/ .vwin{ position:absolute; border-top: 2px outset buttonhighlight; border-left: 2px outset buttonhighlight; border-bottom: 2px outset buttons

推荐度：

点击下载本文 文档为doc格式

导读拖动层_javascript技巧: 拖动层 td{font-size:12px;} /*模拟窗体*/ .vwin{ position:absolute; border-top: 2px outset buttonhighlight; border-left: 2px outset buttonhighlight; border-bottom: 2px outset buttons

<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> 
 
 //This javascript was writen by dron 
 var md=false,mobj,ox,oy,index=1000; 
 function document.onmousedown(){ 
 winfocus(); 
 if(event.srcElement.className=="vwintit") 
 { 
 md = true; 
 mobj = document.getElementById(event.srcElement.forid); 
 ox = mobj.offsetLeft - event.x; 
 oy = mobj.offsetTop - event.y; 
 } 
 } 
 document.onmouseup=function(){md=false;} 
 function document.onmousemove() 
 { 
 if(md) 
 { 
 mobj.style.left = event.x + ox; 
 mobj.style.top = event.y + oy; 
 } 
 } 
 function winfocus() 
 { 
 fobj=document.getElementById(event.srcElement.forid); 
 if(fobj==null){return false} 
 if(fobj.style.zIndex!=index) 
 { 
 index = index + 1; 
 fobj.style.zIndex=index; 
 } 
 } 
 document.onclick=winfocus; 
</ script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

拖动层_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：技巧 js javascript

热门焦点

拖动层_javascript技巧

拖动层_javascript技巧

拖动层_javascript技巧

最新推荐

猜你喜欢

热门推荐