ウェブサイトに虫眼鏡効果を作成する方法

ビデオ: 【Word】可愛いレイアウト基本講座（パソコンインストラクターが作るおたより作成講座）

コンテンツ

説明書
どうやって
お知らせ

あなたのウェブサイトへの訪問者に詳細に画像を見る機会を与えることはこれらの写真の少しの操作を必要とします。小さなCSS、JavaScript、jQueryをコンポジションに追加すると、マウスポインタがページ上の画像の上を移動するときに虫眼鏡の効果を生み出すことができます。この効果は、マウスポインタが前景に表示されている画像の上に移動したときに背景画像を表示する小さなウィンドウを作成することによって実現されます。

説明書

あなたのウェブサイトへの訪問者に画像の「クローズアップ」を与える （ブランドXの写真/ブランドXの写真/ゲッティイメージズ）

次の指示に従って、JavaScriptとjQueryをHTMLコードの「head」セクションに含めます。

この例では、jQueryライブラリはデフォルトのHTMLディレクトリにあります。
ブラウザがjQuery演算子を解析しようとするのを防ぐためにCDATAタグを挿入します。
画像の表示に使用される高さと幅の変数を設定します。

var W = 743。 var H = 1155。 var w = 192。 var h = 300;
拡大機能を開始する条件を設定します。この関数は、呼び出されると、ユーザーがページに表示されている小さい画像の上にマウスを移動したときに、マウスポインタを最大のカバー画像の円形ビューアに置き換えます。このインスタンスをコードで作成します。

$（document）.ready（function（）{

$（ "＃myimage"）マウスオーバー（function（e）{$（document）。マウス（myMM）; $（ "＃glass"））fadeIn（ 'fast'）;

});
拡大機能とファイナライズパラメータを設定します。この例では、隠し画像は小さい方の写真の2倍のサイズで拡大され、拡大ウィンドウはマウスポインタが小さい方の写真の境界の外側に移動すると消えます。あなたはコードでこれを行うことができます：

関数myMM（e）{var myImage = $（ "＃myimage"）; var glassImage = $（ "＃glass-image"）; var glass = $（ "＃glass"）; var xs = e.pageX - myImage.offset（）。left; var ys = e.pageY - myImage.offset（）。top; var bx = glassImage.width（）/ 2 - xsW / w; var by = glassImage.height（）/ 2 - ysH / h; glass.css（ "left"、e.pageX-75-89 + "px"）。css（ "top"、e.pageY-75-10 + "px"）; glassImage.css（ "background-position"、bx + "px" + by + "px"）; if（bx <-W || by <-H || bx> 150 || by> 150）{myImage.unbind（ 'mousemove'、myMM）; glass.fadeOut（ 'fast'）; }}
jQueryの "スクリプト"を閉じて、以下の手順でCDATAパーサーを削除します。

// ]]>
CSSでページレイアウトを設定し、大きな背景画像を配置し、拡大ウィンドウをコードで囲むようにします。
type = "text / css"> #monaimage {マージン左：200px; #glass {background-repeat：no-repeat;}背景位置：左上。幅：250ピクセル。高さ：170ピクセル。パディングトップ：10px。左パディング：89px。マージン：0。位置：絶対表示：なし。＃glass-image {background-image：url（ 'myImageLarge.jpg'）;幅：150ピクセル。高さ：150ピクセル。ボーダー半径：75ピクセル。 -moz-border-radius：75ピクセル。 background-repeat：繰り返しなし。背景色：#fff;マージン：0。パディング：０。カーソル：なし。 }
"body"セクションにページを表示するためのHTMLコードを書きます。

>

画像の上にマウスを移動する