Maison > Article > interface Web > js timer pour implémenter des effets d'animation simples

js timer pour implémenter des effets d'animation simples

小云云original: 2017-12-22 13:07:361827parcourir

js peut implémenter la fonction timer. Cet article partage principalement avec vous des exemples de timer js + effets d'animation simples. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un coup d'œil. J'espère que cela pourra aider tout le monde à créer un meilleur minuteur en utilisant js.

1. Faites glisser vers le bas

<!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>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>移动效果</title>
  <style>
    body {
      margin: 0px;
    }
    #box {
      width: 100px;
      height: 100px;
      background-color: lightcoral;

      position: absolute;
      left: 100px;
      top: 100px;
    }
  </style>
</head>
<body>
<p id="box"></p>
<script>
  var box = document.getElementById(&#39;box&#39;);
  box.onclick = function(){
    clearInterval(t);
  }
  /*
    * 向右移动
     * 当前元素移动到页面的最右边时 -> 向左移动
    * 向左移动
     * 当前元素移动到页面的最左边时 -> 向右移动
   */
  var flag = false;// 默认表示向右
  var speed = 1;// 表示每次变化的值
  t = setInterval(function(){
    //speed += 0.01;
    // 获取当前页面的宽度
    var WIDTH = window.innerWidth;
    var style = window.getComputedStyle(box,null);
    var left = parseInt(style.left);
    var width = parseInt(style.width);
    // 判断当前元素移动的方向
    if (flag){// 向左移动
      left -= speed;
    } else {// 向右移动
      left += speed;
    }
    // 判断什么情况下，向左移动；判断什么情况下，向右移动
    if ((left + width) >= WIDTH){// 向左移动
      flag = true;
    } else if (left <= 0){// 向右移动
      flag = false;
    }
    box.style.left = left + &#39;px&#39;;
  },10);

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

3. Combiner événements et animations

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件与动画结合</title>
  <style>
    body {
      margin: 0px;
    }
  </style>
</head>
<body>
<script>
  // 获取<body>元素
  var body = document.body;
  // 当页面加载完毕后，设置当前<body>元素的高度为当前浏览器窗口的高度
  window.onload = function(){
    setHeight(body);
  };
  // 当用户改变浏览器窗口的大小时，重新设置<body>元素的高度(等于当前窗口的高度)
  window.onresize = function(){
    setHeight(body);
  };
  // 定义函数 - 设置<body>元素的高度等于当前窗口的高度
  function setHeight(elem){
    elem.style.height = window.innerHeight + &#39;px&#39;;
  }

  var width = 100,height = 100;
  // 为<body>元素绑定click事件
  body.onclick = function(event){
    var x = event.clientX;
    var y = event.clientY;
    // 创建<p>元素，显示的位置在鼠标当前的坐标值
    var p = document.createElement(&#39;p&#39;);
    p.setAttribute(&#39;class&#39;,&#39;circle&#39;);
    body.appendChild(p);
    // rgb(0,0,0)格式 -> 颜色随机
    var r = parseInt(Math.random()*255);
    var g = parseInt(Math.random()*255);
    var b = parseInt(Math.random()*255);

    p.style.width = width + &#39;px&#39;;
    p.style.height = height + &#39;px&#39;;
    p.style.backgroundColor = &#39;rgb(&#39;+r+&#39;,&#39;+g+&#39;,&#39;+b+&#39;)&#39;;
    p.style.borderRadius = &#39;50%&#39;;
    p.style.opacity = 1;
    p.style.position = &#39;absolute&#39;;
    p.style.left = x - width/2 + &#39;px&#39;;
    p.style.top = y - height/2 + &#39;px&#39;;

    animate(p);
  }
  // 定义函数 -> 实现动画效果
  function animate(elem){
    var style = window.getComputedStyle(elem,null);
    /*var width = parseInt(style.width);
    var height = parseInt(style.height);
    var left = parseInt(style.left);
    var top = parseInt(style.top);
    width++;
    height++;
    elem.style.width = width + &#39;px&#39;;
    elem.style.height = height + &#39;px&#39;;
    elem.style.left = (left - 0.5) + &#39;px&#39;;
    elem.style.top = (top - 0.5) +&#39;px&#39;;*/

    var opacity = style.opacity;

    if (opacity <= 0){
      clearTimeout(t);
      // 删除当前元素
    }

    opacity -= 0.01;
    elem.style.opacity = opacity;

    // 设定定时器
    var t = setTimeout(function(){
      animate(elem);
    },50);
  }

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

Recommandations associées :

Explication détaillée du réglage et de l'effacement des minuteries en JavaScript

À propos de l'analyse JavaScript de le principe de la minuterie

Explication détaillée de la façon de créer et d'utiliser un exemple de code de minuterie avancé en javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Solution au problème de 2 requêtes lors de la soumission inter-domaines ajax dans jqueryArticle suivant：Solution au problème de 2 requêtes lors de la soumission inter-domaines ajax dans jquery

Articles Liés

Voir plus