Question

问题：我在网站上得到了一张图片（<img>）和一个div，我想用鼠标移动它。这样做效果很好，但是有些东西不起作用：如果我输入图像，就会发生onmouseover-event，但是如果我移动鼠标，总会有onmousemove和onmouseover触发的事件，这是不正确的。

我做错了什么？

修改

您可以在此处查看示例：http://ykg-clan.de/puzzle

您必须单击下方的复选框（“Bereich zumAusschneidenwählen”）并上传大于600x600的图像。在电子邮件中，写上“@。”。我很抱歉，但是它的德语;）

EDIT2

现在，您可以在图像下方看到两条线，如果鼠标位于图像上，这两条线正在增长。当触发事件onmouseover时，上面的行总是添加，'now'。当触发事件onmouseout时，下划线总是添加，即“现在”。正如你所看到的那样，线条的增长非常快，所以它们必须在无限循环中调用......？

Answer 1

在黑暗中捅了一下：将div拖过img时，浏览器是否在鼠标移动的哪个对象之间交替？

当鼠标停在div上时，您可以设置在每个onmousemove和onmouseover事件中检查的标记。如果设置了标志，那么你会忽略（或做一些不同的事情）这些事件。

Answer 2

这是我做的一个例子，它实际上也在进行缩放。我只使用onmousemove并检查每次移动，如果光标仍然在图像区域。如果不是这种情况，则会隐藏缩放框。我为缩放框和图像添加了边框，这样您就可以看到它有效地与边框一起使用（在这里和那里对IE进行了一些检查）。

首先是一些CSS。做样式，使其看起来与禁用JavaScript时相同。在JavaScript中，必须再次设置一些CSS属性，因为如果不这样做就不能使用它们。

body        { text-align:center; margin:0 }
#zoombox    { border:5px solid gray; display:none; position:absolute }
img         { border:2px solid darkgray }

<强>的JavaScript 即可。有关重新定义，请参阅window.onload。我知道这很愚蠢，但如果不这样做就行不通。另请注意代码顶部的IE版本检查。

var ieVersion = undefined;
if (navigator.appName == 'Microsoft Internet Explorer') {
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(navigator.userAgent) != null) ieVersion = parseInt(RegExp.$1);
}
function cursor(e) {
    if (!e) e = window.event;
    if (e.pageX || e.pageY)
        return { 'x' : e.pageX, 'y' : e.pageY };
    else if (e.clientX || e.clientY) {
        if (ieVersion > 5)
            return { 'x' : e.clientX + document.documentElement.scrollLeft, 'y' : e.clientY + document.documentElement.scrollTop };
        else
            return { 'x' : e.clientX + document.body.scrollLeft, 'y' : e.clientY + document.body.scrollTop };
    }
}
function zoomba(context, e) {
    zoom.style.display = 'block';
    zoom.style.backgroundImage = 'url(' + context.src + ')';
    document.onmousemove = function(e) {
        var w = context.width;
        var h = context.height;
        var x = context.offsetLeft;
        var y = context.offsetTop;
        var b = parseInt(context.style.borderWidth)

        var xmouse = cursor(e).x - x - b;
        var ymouse = cursor(e).y - y - b;

        if (xmouse >= 0 && xmouse <= w && ymouse >= 0 && ymouse <= h) {
            var zw = parseInt(zoom.style.width);
            var zh = parseInt(zoom.style.height);
            var zb = ieVersion < 6 ? 0 : parseInt(zoom.style.borderWidth)

            zoom.style.left                 =   xmouse * (w - zw - zb * 2) / w + x + b + 'px';
            zoom.style.top                  =   ymouse * (h - zh - zb * 2) / h + y + b + 'px';
            zoom.style.backgroundPosition   =   (xmouse + zw / 2) * 100 / (w + zw) + '% ' +
                                                (ymouse + zh / 2) * 100 / (h + zh) + '%';
        } else {
            zoom.style.display = 'none';
            return false;
        }
    }
}
window.onload = function() {
    zoom = document.createElement('div');
    zoom.setAttribute('id', 'zoombox');
    zoom.style.width = '150px';
    zoom.style.height = '150px';
    zoom.style.borderWidth = '5px';
    document.body.appendChild(zoom);
    var img = document.getElementsByTagName('img');
    for (var i = 0; i < img.length; i++)
        img[i].style.borderWidth = '2px';
}

缩放框的位置计算非常复杂，但我简化了变量名称以提高可读性。如果你想优化代码，我建议使用固定数字作为缩放框尺寸和边框尺寸，而不是为此设置变量。

HTML示例：

<p>
    <img src="http://static.tumblr.com/noiu98j/gUplb4j88/trollface.jpg" onmousemove="zoomba(this, event)" width="400" height="365" alt="Trollface" />
    <img src="http://static.tumblr.com/noiu98j/gUplb4j88/trollface.jpg" onmousemove="zoomba(this, event)" width="300" height="274" alt="Trollface" />
</p>
<p>
    <img src="http://www.worldfactsandfigures.com/maps/802802.jpg" onmousemove="zoomba(this, event)" width="1000" height="542" alt="Earth map" />
</p>

只需使用<img> width和height属性为图片设置较小的尺寸。缩放图像是具有实际大小的图像（因为它使用CSS设置为背景图像）。另一种方法是拥有两个图像：缩放版本和原始图像。然后，您可以使用添加到context.src的前缀更改缩放框的背景图像。（您必须将context.src拆分为目录和文件名，并在其间添加前缀，以便获得有效的URL。）

这与XHTML 1.0 Strict Doctype完美配合。在IE5.5，IE6，IE7，IE8，Safari 5，Firefox 4，Chrome 6和Navigator 9中都能正常工作。我在旧的IE版本中遇到的唯一问题是缩放的图像没有被捕获，所以每个鼠标移动图像重载。如果有人能解决这个问题会很好。

Example here

仅保留框，不缩放

如果你只想要一个移动的盒子而没有实际的缩放，请注释掉以下几行：

function zoomba(context, e) {
    zoom.style.display = 'block';
//  zoom.style.backgroundImage = 'url(' + context.src + ')';
    document.onmousemove = function(e) {
        var w = context.width;
        var h = context.height;
        var x = context.offsetLeft;
        var y = context.offsetTop;
        var b = parseInt(context.style.borderWidth)

        var xmouse = cursor(e).x - x - b;
        var ymouse = cursor(e).y - y - b;

        if (xmouse >= 0 && xmouse <= w && ymouse >= 0 && ymouse <= h) {
            var zw = parseInt(zoom.style.width);
            var zh = parseInt(zoom.style.height);
            var zb = ieVersion < 6 ? 0 : parseInt(zoom.style.borderWidth)

            zoom.style.left                 =   xmouse * (w - zw - zb * 2) / w + x + b + 'px';
            zoom.style.top                  =   ymouse * (h - zh - zb * 2) / h + y + b + 'px';
//          zoom.style.backgroundPosition   =   (xmouse + zw / 2) * 100 / (w + zw) + '% ' +
//                                              (ymouse + zh / 2) * 100 / (h + zh) + '%';
        } else {
            zoom.style.display = 'none';
            return false;
        }
    }
}

Javascript：onmouseover在onmousemove上触发

2 个答案:

仅保留框，不缩放