1

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

  1. 当我滚动（使用鼠标滚轮或侧面的滚动条）时，覆盖层和光标彼此远离：覆盖层随页面移动，而光标相对于监视器保持静止。我已经尝试过“onscroll”，但它不起作用

  2. 我对页面中的图像使用了“onmouseover”和“onmouseout”功能，但由于某种原因，它们只在页面加载时执行一次。

  3. 当我将鼠标放在图像的左上角时，我想查看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";
            }
        }
    }

PS：如果你想知道为什么我添加覆盖 div 并使用 JS 而不是 HTML 设置属性，原因是当我设法在某个时候制作 JS 代码时，这将成为 Chrome 扩展，这意味着我可以将 JS 和 CSS 注入页面，但没有 HTML。

4

0 回答 0