0

これがフィドルです：http://jsfiddle.net/5Lfqr/

フィドルには、画像のペア (サムとビッグ) の次の html が含まれています。

<div class="wrapper">
<a href="http://cssglobe.com/lab/tooltip/02/1.jpg" class="preview" title="">
    <img src="http://cssglobe.com/lab/tooltip/02/1s.jpg" alt="gallery thumbnail">
</a>
</div>

アイデアは、ユーザーがサムネイルの上にマウスを置いたときに大きな画像を表示することです。

このソリューションは非常にシンプルで、1 つの点を除いてうまく機能します。最初は、大きな画像のオフセットがマウス位置のちょうど右下にあるということです。大きな画像を親指の上に置きたいので、それを覆う必要があります。実装すると、オフセットを次のように変更します。

xOffset = -100;
yOffset = -100;

大きな画像がちらつきます。おそらく、マウス カーソルが親指の上にあり、同時に大の上にあるため、何をすべきか判断できないためです。大きな画像は、ホバーすると透明になります。

それに対する解決策はありますか？

4

2 に答える 2

0

このスクリプトを試してみてください。気に入ったら良さそうです。

this.imagePreview = function(){ 
$("a.preview").hover(function(e) {

  $("img").attr({src:"http://cssglobe.com/lab/tooltip/02/1.jpg"}); 
}, function(e) {
   $("img").attr({src:"http://cssglobe.com/lab/tooltip/02/1s.jpg"}); 
});

};
$(document).ready(function(){
imagePreview();
});
于 2013-07-25T11:50:49.193 に答える