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

网络编程 2021-07-04 17:32www.168986.cn编程入门

狼蚁网站SEO优化长沙网络推广就为大家带来一篇js定时器+简单的动画效果实例。长沙网络推广觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随长沙网络推广过来看看吧

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;
      : 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. = 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  = parseInt(style.);
    width++;
    height++;
    elem.style.width = width + 'px';
    elem.style.height = height + 'px';
    elem.style.left = (left - 0.5) + 'px';
    elem.style. = ( - 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定时器+简单的动画效果实例就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

上一篇：浅谈jquery中ajax跨域提交的时候会有2次请求的问题下一篇：浅谈Node.js CVE-2017-14849 漏洞分析（详细步骤）

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设