web-dev-qa-db-ja.com

ホバー時のズーム/パンの例

私はダッシュボードアプリでこのユーザーインターフェイスのアイデアを念頭に置いており、以前に見たことはあるが、Webでそのインスタンスを見つけることができないと確信しています。

本質は、サムネイル画像をユーザーに提示し、マウスがサムネイルの上に移動すると、大きなビューポートで実際の画像を100%ズームでオーバーレイすることです。

これは特別なことではありませんが、100%ズームした画像が大きすぎてビューポートに収まらない場合はどうしますか?さて、あなたは写真編集ソフトウェアで使用されているものと同じコンセプトをyonksに適用します。ユーザーがサムネイルの境界の周りでマウスを動かすと、同じように100%ズームされたビューポートを動かします。

マウスをクリックする必要がないのでそれは良い考えだと思うし、少なくとも私の頭の中では、iPadでパンするのと同じくらいスムーズに感じるだろう。

この例をいくつか探していますが、うまくいきませんでした。私が見つけた最も近い一致は、このオンライン小売業者のサイト koyono.com にあります。左側の画像の上にマウスを置くと、ズームされたバージョンが制限されたビューポートとともに表示され、ビューポートはマウスに関連して元の画像の上に移動します。

誰かがウェブサイトやソフトウェアから例を得ましたか?特に、ズームされたビューポートが元のサムネイルの上に表示されている場合、可能な限り多くのユーザーの画面を使用して100%ズームのビューポートを表示したい(サムネイルの場所を直接制御することはできない)ダッシュボードにレイアウトされています)。

6
Yoshi

はい-私はここ Bravissimo.com でこれを見てきました。実際には非常に滑らかな感触を持っています。

Professor cloud からのクラウドズームと呼ばれるjqueryプラグインがあります-内部ズームオプションが必要です。これは上記のウェブサイトが使用しているものです。

6
Roger Attrill

http://www.visual-blast.com/javascript/jqzoom-22-jquery-image-zoom-tool/

これは、私が見た中で最高のズームツールの1つです。それはjQueryであり、重いパフォーマンスではないため、スムーズに動作します。ズームウィンドウの位置はカスタマイズ可能だと思います。

うまくいくと思います。

1
BetaSve