画像にマウスを置いたときにズームイン/ズームアウトするには JS を使用します
|
マウスが画像上にあるときにズームインおよびズームアウトするには、JS を使用します。具体的なコードは次のとおりです。
<!DOCTYPE html>
<html>
<ヘッド>
<タイトル></タイトル>
</head>
<本文>
<div id='div_jpg' スタイル="幅: 200px;高さ: 200px;">
<img src="./128206.jpg" id="img" スタイル="幅: 100%;高さ: 100%;">
</div>
<スクリプト>
var img = document.getElementById('img')
変数 s1,s2
コンソール.log(画像)
// 画像拡大効果 i = 100;
img.addEventListener('mouseover',function(){
クリア間隔(s1);
s1 = setInterval(関数(){
i+=0.1;
img.style.width = (i)+'%';
img.style.height = (i)+'%';
パースフロート
if(i>=120) clearInterval(s1);
},1);
})
img.addEventListener('mouseout',function(){
クリア間隔(s2);
s2 = setInterval(関数(){
i-=0.1;
img.style.width = (i)+'%';
img.style.height = (i)+'%';
パースフロート
i<=100の場合、s2をクリアします。
})
})
</スクリプト>
</本文>
</html>ソースコードを共有してください。気に入った友達はクリックして表示します: jQueryプラグインPinchzoom.jsをベースに、指でタッチして画像を拡大する特殊効果のソースコード jQuery マウスを画像の上に置くと拡大し、スライドするとタイトルの特殊効果が表示されます。 これで、マウスを画像上に置いてズームイン/ズームアウトする JS の使い方に関する記事は終了です。 js 画像のズームイン/ズームアウトの詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。 今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySql 5.6.35 winx64 インストール詳細チュートリアル
>>: VMware10 での CentOS 7 のインストールと設定のチュートリアル
推薦する
Node.js を使用してパスワード ジェネレータを作成するための完全な手順
目次1. 準備2. コマンドラインの記述2.1 バージョンと説明を追加する2.2 パスワードの長さを...
MySQLデータベース最適化技術の簡単な紹介
成熟したデータベース アーキテクチャは、最初から高可用性、高スケーラビリティなどの機能を備えて設計さ...
VMware 仮想マシンで HTTP サービスを確立して分析する手順
1. xshell を使用して仮想マシンに接続するか、仮想マシンに直接コマンドを入力します。以下はx...
CSS で overflow-y: visible; が機能しない理由の分析と解決
シナリオ最近の要件は、モバイル デバイス用の h5 ページです。これには、選択可能なカードの行が必要...
Windows 2008 タスク プランが bat スクリプトの実行に失敗したときに 0x1 を返す問題の解決方法
テスト環境: C:\>systeminfo | findstr /c:"OS 名&q...
Apache FlinkCEP でタイムアウトステータス監視を実装するための詳細な手順
CEP - 複合イベント処理。ご注文後、一定期間内にお支払いの確認が取れませんでした。タクシーの配...
位置のいくつかの巧妙な応用の詳細な説明:sticky スティッキーポジショニング
背景: position:sticky はスティッキー配置とも呼ばれます。スティッキー配置の要素は、...
Vue の一般的な問題と解決策の概要 (推奨)
Vue に限定されず、他の種類の SPA プロジェクトにも当てはまる問題がいくつかあります。 1....
CentOS7 ファイアウォール操作コマンドの完全なリスト
目次インストール： 1. ファイアウォールの基本的な使い方2. ファイアウォールd-cmdを設定する...
Vueでキャッシュされたページを管理する方法
目次問題1: 破壊1. 破壊する方法2. いつ破壊するか2.1 解決策1: route.queryを...
MySQLのテーブル構造を変更する際に知っておきたいメタデータロックの詳しい解説
序文MySQL を扱ったことがある人なら、テーブル メタデータ ロックの待機についてよく知っているは...
おすすめの無料英語手書きフォント20選
Jellyka Beesアンティーク手書き [ank]* ジェリーカ・カティカップケーキ LHF ジ...
jsはクリックしてカードを切り替える機能を実現します
この記事の例では、クリックしてカードを切り替える機能を実現するためのjsの具体的なコードを共有してい...
MySQLはライブラリ内の主キーなしでテーブルインスタンスコードを素早く取得します
概要MySQL データベースで主キーのないテーブルを表示するための SQL ステートメントをいくつか...