Home > Article > Web Front-end > js timer to implement simple animation effects

js timer to implement simple animation effects

小云云Original: 2017-12-22 13:07:361828browse

js can implement the timer function. This article mainly shares with you examples of js timer + simple animation effects. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let's follow the editor and take a look. I hope it can help everyone make a better timer using js.

1. Swipe down

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

2.Move effect

<!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. Combination of events and 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>

Related recommendations:

Detailed explanation of setting and clearing timers in JavaScript

About the analysis of the principles of timers in JavaScript

Detailed explanation of how to create and use advanced timer instance code in javascript

The above is the detailed content of js timer to implement simple animation effects. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Solution to the problem of 2 requests when ajax cross-domain submission in jqueryNext article：Solution to the problem of 2 requests when ajax cross-domain submission in jquery

See more

js timer to implement simple animation effects

Related articles