简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JS を使用して単純な折りたたみと展開のアニメーションを実装する方法

php中世界最好的语言
リリース： 2018-06-01 14:42:15
オリジナル
1613 人が閲覧しました

今回はJSを使って簡単な折り畳み・展開アニメーションを実現する方法を紹介します。 JSを使って簡単な折り畳み・展開アニメーションを実装する際の注意点を紹介します。 

<!DOCTYPE = html>
<html>
 <head>
  <title>JS折叠展开动画</title>
  <style>
  body{
   margin: 0px;
   padding: 0px;
  }
  .red{
   background-color:red;
   width:200px;
   height:200px;
   position:relative;
   left:-200px;
   top:0px;
  }
  .blue{
   background:blue;
   width:20px;
   height:50px;
   position:absolute;
   left:200px;
   top:75px;
  }
  </style>
 </head>
 <body>
  <p class="red" id="cf1"><p class="blue" id="cf">分享</p></p>
  <script>
  window.onload = function(){
   var onp = document.getElementById("cf1");
   onp.onmouseover = function(){
    startmove(0);
   }
   onp.onmouseout = function(){
    startmove(-200);
   }
  }
  var timer ;
  function startmove(target){
   clearInterval(timer);//清除定时器，以免多次触发定时器导致速度越来越快而不是匀速前进
   var onp1 = document.getElementById("cf1");
   timer = setInterval(function(){
   var speed = 0;
   if(onp1.offsetLeft<target){
    speed = 10;
   }else{
    speed = -10;
   }
   if(onp1.offsetLeft==target){
    clearInterval(timer);
   }
   else{
   onp1.style.left = onp1.offsetLeft+speed+&#39;px&#39;;
   }
   },30)
  }
  </script>
 </body>
</html>
ログイン後にコピー

動作効果:

1. CSS 部分: 1. CSS ファイルの参照メソッドを確認します。参照メソッド) 3.

絶対位置

と相対位置関係を確認します (親関係は relative を使用します。子関係は

absolute

を使用します)

2. js 部分: 1、element.style.left &

element .offsetLeft

違い: ① 前者の単位は px であり、後者の単位は数値です。

② その他は http://www.jb51.net/article を参照してください。 /43981.htm

2. 最初は十分なアイデアがありません マウスの配置と移動の重要な変数を抽象化できていないのは明らかです - ターゲットの位置が違うだけです 3. 関数パラメータ

をできるだけ少なくします目標が達成できれば)


4. マウス アクション オブジェクトは親レベルに設定されます。p が最適です。そうでない場合はちらつきが発生します (

onmouseover

が呼び出されたばかりで、ターゲットが削除され、

onmouseout

が再度呼び出されました) 5. タイマーのクリアに注意してください (①、移動時の速度が不安定になるのを防ぐため、②、目標位置まで停止モーション)

3. その他: Q: Google Chrome はポップアップ ウィンドウのブロックを解除できますか?

A: 設定 - 詳細設定 - プライバシー設定 - コンテンツ設定 - 関連する設定を行うためのポップアップ ウィンドウ。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨書籍:

JS で DOM ノードを使用する方法

JS を使用してバッファリング動作を実装する方法

以上がJS を使用して単純な折りたたみと展開のアニメーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript 折り畳み 単純
ソース：php.cn
前の記事：noVNC リモート デスクトップを vue プロジェクトに導入する手順は何ですか? 次の記事：vue プロジェクトで ueditor を使用する (詳細なチュートリアル)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
AJAX、PHP、サーバー送信イベントを使用して OpenAI の API からデータをストリーミングします Server Sent Events (SSE) を使用して、JavaScript と PHP を使用して上記の API からブラウザ クライアントにデータをストリーミングするには...
から 2023-11-11 12:03:23
0
1
497
Uncaught TypeError: 未定義のプロパティを設定できません (「innerHTML」を設定) PHPを使用して、クラス「Continuous TextBox」（クラスによって定義されている）の要素でWebページを作成しようとしています。クリックされると、別の関数ID「har...
から 2023-11-08 21:06:09
0
1
278
JavaScriptでCSS/HTMLの名前付きcolorのRGB値を取得する方法 [name-rgb] という名前の Javascript オブジェクトを作成しました。 Basic:namedColors={AliceBlue:[240,248,255],Ant...
から 2023-11-06 09:05:50
0
2
210
非常に多くの JavaScript スクリプトが乱数を追加するのはなぜですか?衝突？ 私は最近 JavaScript を学習しており、Math.rand() を使用してリンク (Face book.com、可読性ブックマーク) に追加する例をたくさん見てきました。こ...
から 2023-11-04 20:00:04
0
2
296
JavaScript のパフォーマンス制限を特定する Javascript のボトルネックを見つけようとしています。基本的に、私はJavaScriptで書かれたChrome拡張機能を開発していますが、タスクの実行には4〜5秒かかります...
から 2023-10-31 20:47:17
0
1
229
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！