页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

拖动层

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<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> 
<script> 
    //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 全选提示:你可先修改部分代码,再按运行]

Tags：拖动层

百度中搜索更多的关于拖动层内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

文章评论

共有位脚本之家网友发表了评论我来说两句

拖动层

文章评论

同类文章

最近更新

热点排行

拖动层

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行