欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js定时器+简单的动画效果实例

程序员文章站 2022-03-22 16:42:17
1.向下滑动

1.向下滑动

<!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>
<div id="show"></div>
<script>
 var show = document.getelementbyid('show');
 /*show.style.display = 'block';

 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 + 'px';
  }
 },50);*/

 slidedown(show,400);

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

  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 + 'px';
   }
  },50);
 }


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

2.移动效果

<!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>
<div id="box"></div>
<script>
  var box = document.getelementbyid('box');
  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 + 'px';
  },10);

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

3.事件与动画结合

<!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 + 'px';
  }

  var width = 100,height = 100;
  // 为<body>元素绑定click事件
  body.onclick = function(event){
    var x = event.clientx;
    var y = event.clienty;
    // 创建<div>元素,显示的位置在鼠标当前的坐标值
    var div = document.createelement('div');
    div.setattribute('class','circle');
    body.appendchild(div);
    // rgb(0,0,0)格式 -> 颜色随机
    var r = parseint(math.random()*255);
    var g = parseint(math.random()*255);
    var b = parseint(math.random()*255);

    div.style.width = width + 'px';
    div.style.height = height + 'px';
    div.style.backgroundcolor = 'rgb('+r+','+g+','+b+')';
    div.style.borderradius = '50%';
    div.style.opacity = 1;
    div.style.position = 'absolute';
    div.style.left = x - width/2 + 'px';
    div.style.top = y - height/2 + 'px';

    animate(div);
  }
  // 定义函数 -> 实现动画效果
  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 + 'px';
    elem.style.height = height + 'px';
    elem.style.left = (left - 0.5) + 'px';
    elem.style.top = (top - 0.5) +'px';*/

    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>

以上这篇js定时器+简单的动画效果实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。