3

特定の画像の上に（マウスオーバーで）ズーム画像を表示して、「ここをクリックしてズーム」を暗示したいと思います。カーソルを使いたくない。

JavaScript jQueryでこれを行う良い方法があると確信していますが、私はそれを知りません.

誰か良いアイデアはありますか？

4

3 に答える 3

3

HTML:

<a href='big.jpg'>
    <img src='mini.jpg' alt='a kitten'>
    <span>Click to view larger</span>
</a>

CSS:

a > img + span {display: none}
a:hover > img + span {display: inline}

あとはお好みでスタイリング。

于 2010-08-14T00:35:14.537 に答える
1

この jQuery プラグインは、必要に応じて簡単にカスタマイズできます (つまり、クリックを実装します)。

于 2010-08-14T00:25:50.250 に答える
0

ポインター カーソルの代わりにズーム アイコンを使用しますか? Mozilla はズームカーソル ( http://www.worldtimzone.com/mozilla/testcase/css3cursors.html ) をサポートしていますが、IE では問題に直面する必要があります。おそらく、次のようなカスタムズームアイコンで隠しdivを作成<div style="display:none" id="zoomcursor">yourcursor</div>できます。次に、画像とjqueryで遊ぶことができます。

$('img.zoomthis').mouseover(function(){
    var pos = $(this).position();
    $('#zoomcursor').css("position","absolute");
    $('#zoomcursor').css("top",pos.top+18);//You have to change this in order to place it right over your image
    $('#zoomcursor').css("left",$(obj).width()-30); //this too
    $('#zoomcursor').show();
}).mouseout(function(){
    $('#zoomcursor').hide();
})
于 2010-08-14T00:37:41.613 に答える