在 Greasemonkey 脚本中弹出天桥图像的问题

Question

我开始编写 Greasemonkey 脚本作为学习 JavaScript 的开始。脚本所做的只是将鼠标指针悬停在缩略图上，然后将该图片放大到弹出窗口。

我快完成了。但是有一些障碍......

1. 当 mouseenter 事件触发时，它会生成一个弹出窗口，并且它还会在网页本身中加载相同的图像！我认为，因此也阻止了它执行 mouseleave 部分。

2. 如何根据加载图像的特定测量值动态设置弹出窗口的宽度和高度？

3. 在 '/thumbs/75x60/' 部分，我想使用 * 通配符替换 '75x60' （如 * x * ），这样任何大小的缩略图都会受到影响。我该怎么做？

见http://jsfiddle.net/JWcB7/6/

HTML 是这样的：

<div id="profPhotos">
    <a class="profPhotoLink" href="...">
        <img width="95" height="130" src=".../thumbs/163x130/8f/fd/588x800_1319044306_9223981.jpg">
    </a>
    <br>
    <a class="profPhotoLink" href="...">
        <img width="75" height="60" src=".../thumbs/75x60/f0/d9/604x453_1319044306_9254715.jpg">
    </a>
    ... ...
</div>

JS 是：

$('#profPhotos .profPhotoLink > img').bind
(
    "mouseenter mouseleave", myImageHover
);

function myImageHover (zEvent)
{
    if (zEvent.type == 'mouseenter')
    {
        var imgurl = this.src.toString();
        //need to replace '/thumbs/75x60/' part with '/photos/' to get the full size image
        var bigimg = imgurl.replace("/thumbs/75x60/", "/photos/");  
        window.location.href = bigimg;
        popup = window.open(bigimg,"popwindow","menubar=0,resizable=0,status=0,titlebar=0,toolbar=0,scrollbars=0,location=0,width=600,height=800") //how to set the width and the height dynamically
    }
    else
    {
        popup.close();
    }
}

Answer 1

如果您不希望图像也加载到同一页面中，请不要这样做！ ：

window.location.href = bigimg;

或者你想要图像和弹出窗口一样吗？

~~~
至于通配符替换，这很容易。变化：

var bigimg = imgurl.replace("/thumbs/75x60/", "/photos/");

收件人：

var bigimg = imgurl.replace(/\/thumbs\/[0-9x]+\//i, "/photos/");  

~~~
调整弹出窗口的大小变得很棘手你真的想要鼠标悬停时的弹出窗口！！？天桥大图可以吗？

我不建议使用实际弹出窗口 (window.open()) 来显示大图像。由于安全阻止和跨站点限制，这可能是一个正确的痛苦。但使用 Greasemonkey 是可能的。

相反，我建议您在伪弹出对话框中显示图像。通过插入一个<div> 来做到这一点，即position: absolute; 并且具有高z-index。

mouseenter 事件随后将更改 div 内图像的src。

总而言之，这是一个完整的 Greasemonkey 脚本，它会在鼠标悬停时生成简单的弹出图像：

你可以see the code in action at jsBin。

// ==UserScript==
// @name    _Popup Image Flyover, Mark I
// @include http://YOUR_SERVER/YOUR_PATH/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// ==/UserScript==

/*--- Create the div and the image that will be pointed to our large
    pictures.
*/
$("body").append ('<div id="idLargePicturePopupWindow"><img></div>');

/*--- In case the popup covers the current mouse position, it must also
    trigger the hover change.  This avoids certain annoying blinking
    scenarios.
*/
$('#idLargePicturePopupWindow').bind (
    "mouseenter mouseleave",
    {bInPopup: true},
    myImageHover
);

/*--- Activate the mouseover on the desired images on the target page.
*/
$('#profPhotos .profPhotoLink > img').bind (
    "mouseenter mouseleave",
    {bInPopup: false},
    myImageHover
);

function myImageHover (zEvent) {
    if (zEvent.type == 'mouseenter') {

        if ( ! zEvent.data.bInPopup) {

            var imgurl = this.src.toString();
            /*--- Need to replace '/thumbs/75x60/' part with '/photos/'
                to get the full size image.
            */
            var bigimg = imgurl.replace(/\/thumbs\/[0-9x]+\//i, "/photos/");

            $("#idLargePicturePopupWindow img").attr ('src', bigimg);
        }

        $("#idLargePicturePopupWindow").show ();
    }
    else {
        $("#idLargePicturePopupWindow").hide ();
    }
}


/*--- Here we add the CSS styles that make this approach work.
*/
GM_addStyle ( (<><![CDATA[
    #idLargePicturePopupWindow {
        position:               absolute;
        background:             white;
        border:                 3px double blue;
        margin:                 1ex;
        opacity:                1.0;
        z-index:                1222;
        min-height:             100px;
        min-width:              200px;
        padding:                0;
        display:                none;
        top:                    10em;
        left:                   10em;
    }
    #idLargePicturePopupWindow img {
        margin:                 0;
        margin-bottom:          -4px;
        padding:                0;
    }
]]></>).toString () );