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 の小さい画像の上部中央になるようにスタイリングしてみてください。

次に、マウスオーバー イベントで、簡単な操作を行います。

$("#previewDiv").show()

その後

$("#previewDiv").hide()

onMouseOut でもう一度非表示にしますか?

于 2013-04-04T09:45:14.320 に答える