簡単なアニメーション効果を実装するための js タイマー-jsチュートリアル-php.cn

簡単なアニメーション効果を実装するための js タイマー

小云云

リリース： 2017-12-22 13:07:36

オリジナル

1806 人が閲覧しました

js はタイマー機能を実装できます。この記事では主に js タイマー + 簡単なアニメーション効果の例を紹介します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。エディターをフォローして見てみましょう。js を使用してより良いタイマーを作成するのに役立つことを願っています。 +

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>向下滑动</title>
 <style>
  body {
   margin: 0px;
  }
  #show {
   width: 200px;
   /* 高度为 0 */
   height: 100px;
   background-color: lightcoral;
   margin: 0 auto;
   /* 设置为隐藏 */
   /*display: none;*/
  }

 </style>
</head>
<body>
<p id="show"></p>
<script>
 var show = document.getElementById(&#39;show&#39;);
 /*show.style.display = &#39;block&#39;;

 var t = setInterval(function(){
  var style = window.getComputedStyle(show,null);
  var height = parseInt(style.height);
  // 判断当前的高度是否为 400
  if (height >= 400){
   clearInterval(t);
  } else {
   height++;
   show.style.height = height + &#39;px&#39;;
  }
 },50);*/

 slideDown(show,400);

 /*
  将上述实现的向下滑动效果，封装在一个固定的函数中
  * 设计当前实现向下滑动效果函数的形参
   * elem - 表示实现向下滑动效果的元素
   * maxHeight - 表示元素向下滑动的最大高度值
  * 函数的逻辑与默认设置CSS样式属性的值无关
  */
 function slideDown(elem, maxHeight){
  // 操作的元素默认的display值为none
  elem.style.display = &#39;block&#39;;
  elem.style.height = &#39;0px&#39;;

  var t = setInterval(function(){
   var style = window.getComputedStyle(elem,null);
   var height = parseInt(style.height);
   // 判断当前的高度是否为 400
   if (height >= maxHeight){
    clearInterval(t);
   } else {
    height++;
    elem.style.height = height + &#39;px&#39;;
   }
  },50);
 }


</script>
</body>
</html>

ログイン後にコピー

関連する推奨事項:

JavaScriptでのタイマーの設定とクリアの詳細な説明

JavaScriptでのタイマーの原理分析について

高度なタイマーのサンプルコードの作成方法と使用方法の詳細な説明JavaScript で

以上が簡単なアニメーション効果を実装するための js タイマーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。