コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript 虫眼鏡効果の簡単な実装_JavaScript スキル

JavaScript 虫眼鏡効果の簡単な実装_JavaScript スキル

WBOY
リリース： 2016-05-16 17:10:09
オリジナル
985 人が閲覧しました

このエフェクトは難しいものではありません。重要なのは位置と比率を設定することです。

マウス位置のキャプチャ、マウス位置領域の決定、onmouseover イベント、onmousemove イベント、onmouseout イベント

大きい画像の表示比率を設定します。小さい画像上に表示されるカット画像の比率は正確である必要があります (できれば 2 倍または 4 倍)。

ここにある画像 m.jpg は 1440X900 です。

コードをコピーします コードは次のとおりです:




<メタhttp-equiv="Content- Type" content="text/html; charset=utf-8">
虫眼鏡効果







著者別の最新記事
最新の問題
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...
から 2024-04-06 13:39:24
0
1
410
Vuetify v-card は v-col で可能なすべての高さに適合します vueとvuetifyを使用してログイン/登録ページを構築しています。以下にコードを置きます (私はイタリア人なのでテキストはイタリア語ですが、理解できると思います): <v...
から 2024-04-06 10:29:26
0
1
406
React コンポーネント内の関数からの予期しない出力 2 つの画像 (IMG と IMG2) をインポートしました。 IMG は、ビューポートの幅が 600 ピクセル未満の場合に表示し、ビューポートの幅が 600 ピクセル以上の場合に...
から 2024-04-03 00:17:44
0
1
285
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート