간단한 애니메이션 효과를 구현하는 js 타이머-JS 튜토리얼-php.cn

간단한 애니메이션 효과를 구현하는 js 타이머

小云云

풀어 주다： 2017-12-22 13:07:36

원래의

1846명이 탐색했습니다.

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에서 타이머의 원리 분석에 대해

고급 타이머 예제 코드 생성 및 사용 방법에 대한 자세한 설명 자바스크립트로

위 내용은 간단한 애니메이션 효과를 구현하는 js 타이머의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!