2

Web サイト用に開発している JavaScript に問題があります。ホバーすると開く画像があります。

まず、私のスクリプトは、画像をウィンドウの右側に表示するか左側に表示するかを計算します。

$("html,body").live("mousemove", function (e) {
    //console.log("mousemove: "+e.pageX)  
    var width_window = $(window).width();
    var center = width_window / 2;
    if (e.pageX < center) {
        side = 'left';
    } else {
        side = 'right';
    }
});

次に、ウィンドウのどちら側に画像が表示されるかがわかったら、余白を含むウィンドウの高さと幅に応じて、画像のサイズを変更する別のスクリプトがあります。

this.resizeImg = function (img, offset) {
    var d = new Date();
    //console.log(d, side);

    var window_height = $(window).height();
    var img_height = $(img).height();
    var img_top = $(img).offset().top;

    var window_width = $(window).width();
    var img_width = $(img).width();
    var img_left;
    side == 'left' ? img_left = offset.left : img_left = window_width - offset.left;

    console.log(window_width, img_left)
    var image_resize_height = window_height - img_top - 20;
    var image_resize_width = window_width - img_left - 20;

    if (img_height + img_top > window_height && img_width + img_left > window_width) {
        console.log("h w")

        if (image_resize_width > image_resize_height) {
            $(img).css('height', image_resize_height + 'px').css("width", "auto");
        } else {
            $(img).css('width', image_resize_width + 'px').css("height", "auto");
        }

    } else if (img_height + img_top > window_height) {
        //console.log("h")
        $(img).css('height', image_resize_height + 'px').css("width", "auto");
    } else if (img_width + img_left > window_width) {
        //console.log("w")
        $(img).css('width', image_resize_width + 'px').css("height", "auto");
    } else {
        //console.log("non")
    }
};

ほとんど機能しますが、画像がウィンドウの幅または高さを超えることがあります。解決策が見つからない...

ここに私のCSSがあります:

.vignette {
        max-height: 800px;
        max-width : 800px;
        z-index : 2;
        top : 25px;
}

.info{
    position : relative;
}

.info img {
    position : absolute;
    display : none;
    cursor : pointer;
}

jsFiddle の私の完全なスクリプト: http://jsfiddle.net/CrnNZ/

ここに私のウェブサイトへのリンクがあります: http://olivierlellouche.com/

助けてくれてありがとう！

4

1 に答える 1

0

画像を25px下に移動しているという事実に注意していますか:

.vignette {
    top : 25px;
}

私が見る唯一の高さ調整は20pxです:

var image_resize_height = window_height - img_top - 20;

計算にさらに数ピクセルを差し引く必要があるかもしれませんか?

またはさらに良い：

var img_top = $(img).offset().top;

画像の生の上部ではなく、オフセット領域の上部である可能性があります。その場合でも、そのために 25px を差し引く必要があります。

（あなたのウェブサイトから）もう1つの便利な方法は、右側の垂直スクロールバーを常に有効または無効にすることです。または、スクロールバーでない場合は、テキスト領域のサイズを変更して、使用可能な領域よりも小さくします。(残念ながら、あなたの jsfiddle をまったく動作させることができませんでした。私が確認できた唯一のエラーは垂直方向の計算エラーでした。水平方向のエラーは見られませんでした。)

高さからさらに数ピクセルを差し引いても、問題は継続しますか?

あなたのコードからはわかりませんが、画像を配置してからサイズを変更しますか? 画像を配置する前に利用可能なサイズを計算することをお勧めします。これにより、配置後にサイズが変更されることはありません。

編集：

はるかに小さいサイズのウィンドウであなたのウェブページを見た後、私は別のことを考えました。$(window).height()は$(document).height()と同じではありません。参照: $(window).height() と $(document).heightが同じでない場合は、残りのページを別の方法で計算する必要がある場合があります。

于 2013-10-16T00:43:46.810 に答える