层的使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></HEAD> <BODY style="height:800px;">
    <div id="tee" style="width:200px; height:200px; background:#f00; position:absolute; cursor:move"></div>
<script type="text/javascript">
        var tee=document.getElementById('tee');

        tee.onmousedown=function(e){
                e=e || event;
                start(e,this);
                e.cancelBubble=true;
                return false;
        }
        function start(e,o)
        {
            var i,
                x,
                y;
            i=0;
            x=e.screenX-o.offsetLeft;
            y=e.screenY-o.offsetTop;

            if(window.addEventListener)
            {
                window.document.addEventListener('mousemove',moving,false)
                window.document.addEventListener('mouseup',end,false)
            }else{
                    window.document.attachEvent('onmousemove',moving)
                   window.document.attachEvent('onmouseup',end)                  }
            function moving(e)
            {
                if(i++^6)//计数器, 如果i=6 则 i^6==0
                    return;
                o.style.left=(e.screenX-x)+'px';
                o.style.top=(e.screenY-y)+'px';
                i=0;

            }            function end(e)
            {
                if(window.addEventListener)
                {
                    window.document.removeEventListener('mousemove',moving,false);
                    document.removeEventListener('mouseup',arguments.callee,false);
                }else{
                        window.document.detachEvent('onmousemove',moving);
                        window.document.detachEvent('onmouseup',arguments.callee);                     }

                window.document.body.focus()    // ff 3.0
            }

        }// end start
    </script>
</BODY>
</HTML>

在来一个<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>提示信息框</title>
<style type="text/css">
a{ color:#000; font-size:12px;text-decoration:none}
a:hover{ color:#900; text-decoration:underline}
body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); overflow:hidden}
#massage_box{ position:absolute; left:expression((body.clientWidth-350)/2); top:expression((body.clientHeight-200)/2); width:350px; height:200px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:2; visibility:hidden}
#mask{ position:absolute; top:0; left:0; width:expression(body.scrollWidth); height:expression(body.scrollHeight); background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden}
.massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%}
.header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff}
</style>

<script language="javascript">
var Obj=''
document.onmouseup=MUp
document.onmousemove=MMovefunction MDown(Object){
Obj=Object.id
document.all(Obj).setCapture()
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
}function MMove(){
if(Obj!=''){
  document.all(Obj).style.left=event.x-pX;
  document.all(Obj).style.top=event.y-pY;
  }
}function MUp(){
if(Obj!=''){
  document.all(Obj).releaseCapture();
  Obj='';
  }
}
</script>
</head><body>
<div id="massage_box"><div class="massage">
<div class="header" onmousedown=MDown(massage_box)><div style="display:inline; width:150px; position:absolute">本站提示信息</div>
<span onClick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" style="float:right; display:inline; cursor:hand">×</span></div>
<ul style="margin-right:25"><li>本人申明此博客所有文章（包括文章插图）均为原创，如需引用或转载请注明出处。
</li><li>欢迎大家对博文中观点留言评述，谢绝无聊人士无素质无观点的灌水漫骂。</li><li>本站已设背景音乐，听音乐盒中收集的音乐时请先到页面底部关闭背景音乐。</li></ul></div></div>
<div id="mask"></div>
<span onClick="mask.style.visibility='visible';massage_box.style.visibility='visible'" style="cursor:hand"><a href="#">显示提示信息</a></span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p></body>
</html>

我也来一个:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div id="drag" style="width:200px; position:absolute; height:200px; cursor:move; background:#cccccc; border:1px solid #ff3300;" onmousedown="drag(this,event)"></div>
<script language="javascript">
function drag(elementToDrag,event){
var startX=event.clientX,startY=event.clientY;
var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop;
var deltax=startX-origX,deltaY=startY-origY;

if(document.addEventListener){
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true)
}
else if(document.attachEvent){
elementToDrag.setCapture();
elementToDrag.attachEvent("onmousemove",moveHandler);
elementToDrag.attachEvent("onmouseup",upHandler);
elementToDrag.attachEvent("onclosecapture",upHandler);
}
else{
var oldmoveHandler=document.onmousemove;
var olduphandler=document.onmouseup;
document.onmousemove=moveHandler;
document.onmouseup=upHandler;
}
if(event.stopPropagation)
event.stopPropagation();
else event.cancleBubble=true;
if(event.preventDefault)
event.preventDefault();
else event.returnValue=false;
function moveHandler(e){
if(!e)e=window.event;
elementToDrag.style.left=(e.clientX-deltax)+"px";
elementToDrag.style.top=(e.clientY-deltaY)+"px";

if(e.stopPropagation)
e.stopPropagation();
else e.canceBubble=true;
}
function upHandler(e){
if(!e)e=window.event;
if(document.removeEventListener){
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}
else if(document.detachEvent)
{
elementToDrag.detachEvent("onlosecapture",upHandler);
elementToDrag.detachEvent("onmouseup",upHandler);
elementToDrag.detachEvent("onmousemove",moveHandler);
elementToDrag.releaseCapture();
}
else{
document.onmouseup=olduphandler;
document.onmousemove=oldmoveHandler;
}
if(e.stopPropagation)
e.stopPropagation();
else e.canceBubble=true;
}

}
</script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>dragDiv.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        body {
            font-family:Verfana;
            font-size:11px;
            color:#333333;
        }
        #win {
            position:absolute;
            left:50px;
            top:50px;
            width:200px;
            height:150px;
            border:1px solid #000000;
            background:yellow;
        }
    </style>
    <script type="text/javascript">
        var win;
        var left = 50;
        var top = 50;
        var move = false;
        function init() {
            win = document.getElementById("win");
            win.onmousedown = startDrag;
            win.onmousemove = drag;
            win.onmouseup = stopDrag;
        }

        window.onload = init;

        function startDrag(event) {
            event = event || window.event;
            var x = event.pageX || event.x;
            var y = event.pageY || event.y;
            left = x - left;
            top = y - top;
            win.style.background = "red";
            move = true;
        }

        function drag(event) {
            if(move) {
                event = event || window.event;
                win.style.background = "blue";
                var x = event.pageX || event.x;
                var y = event.pageY || event.y;
                win.style.left = x - left + "px";
                win.style.top = y - top + "px";
                //captureEvents();
                //win.setCapture();
                if (!window.captureEvents) {
                    win.setCapture();
                } else {
                    captureEvents();
                    //window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
                }
            }
        }

        function stopDrag(event) {
            event = event || window.event;
            win.style.background="yellow";
            var x = event.pageX || event.x;
            var y = event.pageY || event.y;
            left = x - left;
            top = y - top;
            move = false;
            //routeEvent();
            //win.releaseCapture();
            if (!window.releaseEvents) {
                win.releaseCapture();
            } else {
                releaseEvents();
                //window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            }
        }
    </script>
  </head>

<body>
    <div id="win">
    </div>
</body>
</html>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/IBM_hoojo/archive/2010/07/02/5708697.aspx

解决方案 »