0

当用户将鼠标悬停在图像的拇指版本上并且较大的图像随鼠标移动时，下面的代码会显示较大的图像。下面的代码有效，但它将图像定位在鼠标的右侧。我希望图像显示在鼠标上方的顶部中心。

我更改了 xOffset 和 yOffset 值，这将改变上下位置，并将图像向右移动，但不向左移动。

问题是如何修改代码以使悬停时出现的图像位于较小图像上方的顶部中心？

我正在通过 Google 使用最新的 jquery (1.9.1)：http: //ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

jQuery：

this.imagePreview = function(){
xOffset = 0;
yOffset = 20;

$("a.preview").hover(function(e){
    this.t = this.title;
    var url = $(this).attr('alt')
    this.title = "";
    var c = (this.t != "") ? "<span class='preview-title'>" + this.t : "</span>";
    $("body").append("<p id='preview'><img src='"+ url +"' alt='Image preview' />"+ c +"</p>");
    $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn(1000);
    },
    function(){
        this.title = this.t;
        $("#preview").remove();
    });
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });
};

$(document).ready(function(){
    imagePreview();
});

html/php：

    echo '<div style="display:inline;float:left;margin: 10px 4px;">
        <div style="background-color: #DDD;height:100px;border: 1px solid #111;">';
            if ($spacer_flag == 0)
            {
                echo '
                <a href="/view.php?im='.$image_dbid.'&w='.$row['id'].'" title="'.$row['word'].'">
                <img class="preview"
                src="'.$t_show_this_image.'"
                alt="'.$x_show_this_image.'"
                >
                </a>';
            }
            else
            {
                echo '
                <a href="/reserve.php?w='.$row['id'].'" title="">
                <img
                src="'.$t_show_this_image.'"
                ></a>';
            }

            echo '
        </div>
    </div>';
4

1 回答 1

0

通过它的声音，您希望图像是静态的，而不是随着鼠标指针移动。如果是这种情况，如何添加一个包含您希望显示的图像的隐藏 div 并将其样式设置为 CSS 中较小图像上方的顶部中心。

然后，在 mousehover 事件上，做一个简单的

$("#previewDiv").show()

接着

$("#previewDiv").hide()

再次隐藏它 onMouseOut？

于 2013-04-04T09:45:14.320 回答