效果
日期：2014-05-16 浏览次数：20393 次
求一个效果
网色背景是黑的
网页上有一条横线 一条竖线
横线的长是网页的宽
竖线的高是网页的高
这两条线的交点是当前鼠标所在的坐标
鼠标在哪里 这两线的交点就在哪里。
就好像一个十字架。交点随着鼠标走
我表达能力差 不知道这样说大家明白不？
只有20分了 谢谢！！！！！
------解决方案--------------------
这个处理了滚动条：
-----------------------------------------------------
<!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>
------解决方案--------------------
<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.widt
网色背景是黑的
网页上有一条横线 一条竖线
横线的长是网页的宽
竖线的高是网页的高
这两条线的交点是当前鼠标所在的坐标
鼠标在哪里 这两线的交点就在哪里。
就好像一个十字架。交点随着鼠标走
我表达能力差 不知道这样说大家明白不？
只有20分了 谢谢！！！！！
------解决方案--------------------
这个处理了滚动条：
-----------------------------------------------------
<!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>
------解决方案--------------------
<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.widt
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
