js-Timer zur Implementierung einfacher Animationseffekte-js-Tutorial-php.cn

js-Timer zur Implementierung einfacher Animationseffekte

小云云

Freigeben： 2017-12-22 13:07:36

Original

1832 Leute haben es durchsucht

js kann die Timer-Funktion implementieren. In diesem Artikel werden hauptsächlich Beispiele für js-Timer + einfache Animationseffekte vorgestellt. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Lassen Sie uns dem Editor folgen und einen Blick darauf werfen. Ich hoffe, er kann jedem helfen, mit js einen besseren Timer zu erstellen.

1. Nach unten schieben

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

Nach dem Login kopieren

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

Nach dem Login kopieren

3. Kombination aus Events und Animation

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

Nach dem Login kopieren

Verwandte Empfehlungen:

Ausführliche Erklärung zum Einstellen und Löschen von Timern in JavaScript

Über JavaScript-Analyse des Timer-Prinzips

Detaillierte Erklärung, wie man erweiterten Timer-Beispielcode in Javascript erstellt und verwendet

Das obige ist der detaillierte Inhalt vonjs-Timer zur Implementierung einfacher Animationseffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!