求一个效果

<!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=gb2312" />
<title>无标题文档</title>
<style>
body{
background-color:#000000;
margin:0px;
padding:0px;
overflow:hidden;
}
#Layer1 {
position:absolute;
background-color:#FFFFFF;
z-index:1;
overflow:hidden;
}
#Layer2 {
position:absolute;
background-color:#FFFFFF;
z-index:1;
overflow:hidden;
}
#s1{ color:#FFFFFF;}
</style>
<script language="javascript">
 function $(element) {
if (arguments.length > 1) 
{
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push($(arguments[i]));
return elements;
}
if (typeof element == 'string')
{
if (document.getElementById) 
{
element = document.getElementById(element);
} 
else if (document.all) 
{
element = document.all[element];
} 
else if (document.layers) 
{
element = document.layers[element];
}
}
return element;
}
function Init()
{
var obj1 = $("Layer1");
var obj2 = $("Layer2");
obj1.style.left  = "0px";
obj1.style.top   = "100px";
obj1.style.height="1px";
obj1.style.width = window.screen.width + "px"; obj2.style.left  = "100px";
obj2.style.top   = "0px";
obj2.style.width = "1px";
obj2.style.height = window.screen.height + "px";

document.onmousemove = function(_evt)
{
var evt = _evt? _evt : window.event;
//$("s1").innerHTML = evt.x || evt.pageX;
obj2.style.left  = (evt.x || evt.pageX)+"px";
obj1.style.top   = (evt.y || evt.pageY)+"px";

}
}
</script>
</head>
<body onload="Init()"><span id="s1"></span><div id="Layer1"></div><div id="Layer2"></div></body>
</html>

解决方案 »

  1.   

    这个处理了滚动条：
    -----------------------------------------------------<!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=gb2312" />
    <title>无标题文档</title>
    <style>
    body{
    background-color:#000000;
    margin:0px;
    padding:0px;
    overflow:hidden;
    }
    #Layer1 {
    position:absolute;
    background-color:#FFFFFF;
    z-index:1;
    overflow:hidden;
    }
    #Layer2 {
    position:absolute;
    background-color:#FFFFFF;
    z-index:1;
    overflow:hidden;
    }
    </style>
    <script language="javascript">
     function $(element) {
    if (arguments.length > 1) 
    {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
    elements.push($(arguments[i]));
    return elements;
    }
    if (typeof element == 'string')
    {
    if (document.getElementById) 
    {
    element = document.getElementById(element);
    } 
    else if (document.all) 
    {
    element = document.all[element];
    } 
    else if (document.layers) 
    {
    element = document.layers[element];
    }
    }
    return element;
    }
    function Init()
    {
    var obj1 = $("Layer1");
    var obj2 = $("Layer2");
    obj1.style.left  = "0px";
    obj1.style.top   = "100px";
    obj1.style.height="1px";
    obj1.style.width = window.screen.width + "px"; obj2.style.left  = "100px";
    obj2.style.top   = "0px";
    obj2.style.width = "1px";
    obj2.style.height = window.screen.height + "px";

    document.onmousemove = function(_evt)
    {
    var evt = _evt? _evt : window.event;
    obj2.style.left  = (evt.x || evt.pageX)+ (document.body.scrollLeft || document.documentElement.scrollLeft) + "px";
    obj1.style.top   = (evt.y || evt.pageY)+ (document.body.scrollTop  || document.documentElement.scrollTop) + "px";
    }
    }
    </script>
    </head>
    <body onload="Init()"><div id="Layer1"></div><div id="Layer2"></div></body>
    </html>
      

  2.   

    <html>
    <head>
    <title>new page</title>
    <script>
    var mouseX;
    var mouseY;
    document.onmousemove=function (){
    row.style.top=event.y+document.body.scrollTop;
    mouseX=event.x;
    cell.style.left=event.x+document.body.scrollLeft;
    mouseY=event.y;
    };
    function on_load(){
    var div1=document.createElement('<div id=row style="position:absolute;left:0px"></div>');
    var div2=document.createElement('<div id=cell style="position:absolute;top:0px"></div>');
    div1.style.borderTop='1px groove black';
    div2.style.borderLeft='1px groove black';
    div1.style.width=document.body.offsetWidth;
    div2.style.height=document.body.offsetHeight;
    document.body.appendChild(div1);
    document.body.appendChild(div2);
    //添加鼠标滚轮事件
    document.body.onscroll=function (){
    row.style.left=document.body.scrollLeft;
    cell.style.left=document.body.scrollLeft+mouseX;
    row.style.top=document.body.scrollTop+mouseY;
    cell.style.top=document.body.scrollTop;
    };
    }
    </script>
    </head>
    <body onload=on_load()>
    </body>
    </html>