0

この手法を使用して、サムネイルのポップアップ画像を表示しています。唯一の問題は、サムネイルが画面の端に近く、元の画像が非常に大きい場合、画面の端で切り取られることです。

Javascriptが必要であることは知っていますが、画像が表示可能な画面の外にあることを検出して、サムネイルの反対側に切り替える方法が完全にはわかりません。

これどうやってするの？

4

1 に答える 1

1

多少の計算は必要ですが、可能です。上記のプラグインを使用して、次のようにします...:

   $('.thumb').mouseover(function () {  
     if( ( $(window).width() - ($(this).siblings('.popup').position().left + $(this).siblings('.popup').width()) ) < 0) {
        //Change the position here..
        alert("Out of browser");
     }

   });

これは、画像がブラウザの外にあることだけを示していることに注意してください。さらに、これはマージンを考慮していません。あなたはもっと好きなことをしたいかもしれません

   $('.thumb').mouseover(function () {  
     if( ( $(window).width() - ($(this).siblings('.popup').position().left + $(this).siblings('.popup').width() + parseInt($(this).siblings('.popup').css("margin-left") + parseInt($(this).siblings('.popup').css("margin-right")) ) < 0) {
        //Change the position here..
        alert("Out of browser");
     }

   });

parseInt は xxpx (xx は数値) を返すため使用されることに注意してください。parseInt はそれを取り除きます...プラグインがあるかもしれませんが、ゼロからやりたい場合はこれが良いスタートです。

画像自体の移動は、ここでは取り組まなかった別の問題ですが、これでしっかりとしたスタートが切れると思います。

于 2010-02-04T23:12:15.033 に答える