Question

我正在尝试在鼠标光标旁边创建一个小的叠加层，它显示光标的坐标与鼠标所在图像的左上角。我几乎在那里：它有点工作，但仍有一些问题。

当我滚动时（使用鼠标滚轮或侧面有滚动条），叠加层和光标相互远离：叠加层随页面移动，光标相对于页面保持静止监控。我已经尝试过“onscroll”，但它不起作用
我在页面中使用了“onmouseover”和“onmouseout”函数，但出于某种原因，只有在加载页面时才会执行ONCE。
当我将鼠标放在图像的左上角时，我希望看到0,0作为坐标。 X实际上是0，但Y实际上是-15。由于某种原因，图像的坐标在上边缘下方15个像素处。不知道为什么。

好的，现在我提到了问题，这是我的代码：

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link href="main2008.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="Ext/mcs2.js"></script></head>
    </head>

    <body>  
        <div id="content">
            <h1>JS test</h1>
            <img src = "pic.jpg">
        </div>
    </body>

</html>

CSS

#xy {
    font-size:10px;
    position: absolute;
    top: 0px;
    right:0px;
    width:60px;
    visibility: visible;
    color:#006699;
    background-color:#ffffff;
    border: 1px solid #66ccff;
    z-index: 10;
    padding:7px;
}

JS

var myX, myY, xyOn, myMouseX, myMouseY, ImgX, ImgY, Active;


//For each image, set onmouseover and onmouseout to the functions that activate and deactivate
$(document).ready(function() {
    $("img").each(function(i) {
        this.onmouseover = getcoordinates(this);
        this.onmouseout = deactivate(this);
    });
});

//Creation of new div is inside window.onload because it needs to be done when body already exists
  window.onload = function(){
    var divg = document.createElement("div");
    divg.setAttribute('id',"xy");
    divg.appendChild(document.createTextNode("New DIV"));
    document.body.appendChild(divg);  
  };

function getcoordinates(object) {
    ImgX=object.offsetLeft;
    ImgY=object.offsetTop;
    //document.getElementById('xy').style.visibility='visible';
    Active=1;
    alert("Acti"); //This pop-up is just for debugging
}   

function deactivate(object) {
    //document.getElementById('xy').style.visibility='hidden';
    alert("Deacti");  //This pop-up is just for debugging
    Active=0;
}   

document.onmousemove=getXYPosition;  //THIS IS THE KEY FUNCTION!!! And it works
window.onscroll=getXYPosition;    //I tried this to fix the scrolling problem, but it does not work

// Cursor coordinate function

    xyOn = true;
    function getXYPosition(e){
        if (1==1) {    //Instead of "1==1" I had written "Active==1", but it does not work at all
            myMouseX=(e||event).clientX-ImgX;
            myMouseY=(e||event).clientY-ImgY;
            if (myMouseX + 100 > document.documentElement.clientWidth) {
                myX = myMouseX - (myMouseX + 80 - (document.documentElement.clientWidth));
            } else {
                myX = myMouseX + 20;    
            }
            if (myMouseY + 64 > document.documentElement.clientHeight) {
                myY = myMouseY - (myMouseY + 44 - (document.documentElement.clientHeight));
            } else {
                myY = myMouseY + 20;    
            }
            if (document.documentElement.scrollTop > 0) {
                myY = myY + document.documentElement.scrollTop;
                myMouseY = myMouseY + document.documentElement.scrollTop;
            }
            document.getElementById('xy').style.top = myY + "px";
            document.getElementById('xy').style.left = myX + "px";
            document.getElementById('xy').innerHTML = "X is " + myMouseX + "<br />Y is " + myMouseY;
            document.getElementById('xy').innerHTML = document.getElementById('xy').innerHTML;
            if (xyOn) {
                document.getElementById('xy').style.visibility = "visible";
            } else {
                document.getElementById('xy').style.visibility = "hidden";
            }
        }
    }

当鼠标光标悬停在该图像上时，叠加显示相对于图像的鼠标光标坐标

0 个答案: