この記事では、スローモーションアニメーション効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 実装のアイデア1. setIntervalタイミング関数を主に使用 コードサンプル<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>アニマメイトアニメーション</title> <スタイル> * { マージン: 0; パディング: 0; } 。コンテンツ { 幅: 1000ピクセル; マージン: 0 自動; } ボタン { パディング: 5px; マージン: 60px 10px; 境界線: 1px 実線 #666; アウトライン色: 淡いバイオレットレッド; } 。両方 { 背景色: ピンク; 色: #fff; 背景色: 淡い紫赤; } 。箱 { 位置: 相対的; 高さ: 210px; マージン: 0px 自動; 背景色: #191b28; } .yutu{ 位置: 絶対; 上: 0; 左: 0; 幅: 180ピクセル; 高さ: 210px; } .qiaojingjing 位置: 絶対; 上: 0; 左: 820ピクセル; 幅: 180ピクセル; 高さ: 210px; } .word1 { 表示: なし; 位置: 絶対; 上: -50px; 左: 45%; } .word2 { 表示: なし; 位置: 絶対; 上: -30px; 左: 50%; } </スタイル> </head> <本文> <div class="content"> <button class="btn1">道を進む</button> <button class="btn2">喬静静が前進</button> <button class="both">両方向に走る</button> <button class="btn3">帰り道</button> <button class="btn4">喬静静が戻る</button> <div class="box"> <img src="images/于途.png" alt="" class="yutu"> <img src="images/乔晶晶.png" alt="" class="qiaojingjing"> <span class="word1">どうぞ、生涯のご指導を賜りますようお願い申し上げます。 </span> <span class="word2">どうぞ、生涯のご指導を賜りますようお願い申し上げます。 </span> </div> </div> <スクリプト> var btn1 = document.querySelector('.btn1'); var btn2 = document.querySelector('.btn2'); var btn3 = document.querySelector('.btn3'); var btn4 = document.querySelector('.btn4'); var both = document.querySelector('.both'); var yutu = document.querySelector('.yutu'); var qiaojingjing = document.querySelector('.qiaojingjing'); var word1 = document.querySelector('.word1'); var word2 = document.querySelector('.word2'); btn1.addEventListener('クリック', 関数() { アニメーション(yutu, 340, 関数() { word1.style.display = 'ブロック'; }); }); btn2.addEventListener('クリック', 関数() { アニメーション(qiaojingjing, 520, function() { word2.style.display = 'ブロック'; }); }); btn3.addEventListener('クリック', 関数() { アニメーション(yutu, 0, 関数() { word1.style.display = 'なし'; }); }); btn4.addEventListener('クリック', 関数() { アニメーション(qiaojingjing, 820, function() { word2.style.display = 'なし'; }); }); both.addEventListener('click', 関数() { アニメート(yutu, 340); アニメート(qiaojingjing, 520); word1.style.display = 'ブロック'; word2.style.display = 'ブロック'; }); // アニメーション関数 obj アニメーションオブジェクト、ターゲット ターゲットの左オフセット、コールバック コールバック関数 function animate(obj, target, callback) { // 前のアニメーションをクリアします clearInterval(obj.timer); obj.timer = setInterval(関数() { // 各移動の距離を計算します var step = (target - obj.offsetLeft) / 20; // ステップ数を丸めます step = step > 0 ? Math.ceil(step) : Math.floor(step); obj.style.left = obj.offsetLeft + ステップ + 'px'; obj.offsetLeft == ターゲットの場合 { // アニメーションを停止します clearInterval(obj.timer); // コールバック関数がある場合は、コールバック関数を実行します。if (callback) { 折り返し電話(); } } }, 30); } </スクリプト> </本文> </html> アニメーション効果: 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL でレプリケーション フィルターを動的に変更する方法
>>: Docker データボリュームの一般的な操作コードの例
CSS変数の知識を使って、追加したコードとコメントを直接投稿します <!DOCTYPE htm...
目次1. ブリッジを設定し、検証のためにパケットをキャプチャする1. ブリッジデバイスとセッションを...
1. MySQL 自己接続MySQL では、情報を照会するときに自分自身に接続 (自己接続) する必...
この記事では、自作メニューをクリックする効果を実現するためのJavaScriptの具体的なコードを参...
オンラインチュートリアルに従って実装しました。 zabbix3.4、スクリプトとsendEmailを...
まとめシナリオによっては、レコードがない場合は挿入し、レコードがある場合は更新するという要件がある場...
目次1. MySQL で現在の時刻を表現するにはどうすればよいでしょうか? 2. TIMESTAMP...
毎日のjQueryプラグイン - ステップ進捗軸 ステップ進捗軸ツール系のサイトでは入門チュートリア...
Drop-shadow と box-shadow はどちらも影効果(ハロー効果)のための CSS プ...
序文MySQL は最も人気のあるリレーショナル データベース管理システムです。WEB アプリケーショ...
Vueバスの簡単な使い方シナリオの説明:コンポーネント A にはコンポーネント B と C が含まれ...
以下のように表示されます。 SELECT prod_name,prod_price FROM pro...
Vueはブール値でストレージを保存します今日、問題に遭遇しました。バックグラウンドから返された真偽の...
html <div class="スピナー"></div&g...
成果を達成する実装コードhtml <div クラス = 'ラッパー'> ...