前端小计（Erik笑容的动画）——第二十到第二十一天：让你和页面对话

最新推荐文章于 2020-09-22 08:00:00 发布

流浪的宇滴

最新推荐文章于 2020-09-22 08:00:00 发布

阅读量181

点赞数

本文链接：https://blog.csdn.net/qq_45358338/article/details/99213033

版权

js基础同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端基础

8 篇文章 0 订阅

订阅专栏

setInterval

2 篇文章 0 订阅

订阅专栏

作业要求：做一个帧动画：

1、看看最终的样子：Erik笑容的动画
2、图片地址（图片切成17张）：http://ife.baidu.com/2016/static/img/erik_ce204002.jpg
3、注意：不要使用 CSS animation，因为这里要学习的是使用 JS 来操作 CSS，而不是为了完成这个任务。
不多说了，先上代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Erik的微笑</title>
  <style>
    .boos {
      position: relative;
      background-image: url(timg.jpg);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 100%;
      height: 1000px;
      z-index: 0;
    }
    #parent {
      position: absolute;
      width: 100%;
      height: 482px;
      margin: 200px 0;
      background: white;
    }
    .p1 {
      font-size: 42px;
      position: absolute;
      top: 70px;
      left: 50px;
      width: 300px;
    }
    .p2 {
      font-size: 20px;
      position: absolute;
      top: 220px;
      left: 50px;
      width: 280px;
    } 
    #child {
      width: 480px;
      float: right;
    }
  </style>
</head>
<body>
  <div class="boos">
    <div id="parent">
      <p class="p1">纸上得来终觉浅
绝知此事要躬行</p>
      <p class="p2">我们精心设计了许多编码任务
让你可以循序渐进、由浅入深
地在实践中掌握技术</p>
      <div id="child"><img id="img" src="sr/img/1.gif" alt=""></div>
    </div>
  </div> 
  <script>
    window.onload = function() {
    //先获取元素给变量img
      var img = document.querySelector('img');
      //定时器：130毫秒调用方法a
      setInterval(a, 130);
      function a() {
      //自己只想到了switch循环，根据上一张图片，来找到下一张图片，以此达到图片连续的目的
      //img.getAttribute('src')，获取img的src属性值，然后case做对照，替换src的属性值
        switch(img.getAttribute('src')) {
          case 'sr/img/1.gif':
          img.setAttribute('src', 'sr/img/2.gif');
          break;
          case 'sr/img/2.gif':
          img.setAttribute('src', 'sr/img/3.gif');
          break;
        case 'sr/img/3.gif':
          img.setAttribute('src', 'sr/img/4.gif');
          break;
        case 'sr/img/4.gif':
          img.setAttribute('src', 'sr/img/5.gif');
          break;
        case 'sr/img/5.gif':
          img.setAttribute('src', 'sr/img/6.gif');
          break;
        case 'sr/img/6.gif':
          img.setAttribute('src', 'sr/img/7.gif');
          break;
        case 'sr/img/7.gif':
          img.setAttribute('src', 'sr/img/8.gif');
          break;
        case 'sr/img/8.gif':
          img.setAttribute('src', 'sr/img/9.gif');
          break;
        case 'sr/img/9.gif':
          img.setAttribute('src', 'sr/img/10.gif');
          break;
        case 'sr/img/10.gif':
          img.setAttribute('src', 'sr/img/11.gif');
          break;
        case 'sr/img/11.gif':
          img.setAttribute('src', 'sr/img/12.gif');
          break;
        case 'sr/img/12.gif':
          img.setAttribute('src', 'sr/img/13.gif');
          break;
        case 'sr/img/13.gif':
          img.setAttribute('src', 'sr/img/14.gif');
          break;
        case 'sr/img/14.gif':
          img.setAttribute('src', 'sr/img/15.gif');
          break;
        case 'sr/img/15.gif':
          img.setAttribute('src', 'sr/img/16.gif');
          break;
        case 'sr/img/16.gif':
          img.setAttribute('src', 'sr/img/17.gif');
          break;
        case 'sr/img/17.gif':
          img.setAttribute('src', 'sr/img/1.gif');
          break;
        }
      }
    }
  </script>
</body>
</html>

感觉很笨。
都是作业的锅 emmm

流浪的宇滴

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端小计（Erik笑容的动画）——第二十到第二十一天：让你和页面对话

作业要求：做一个帧动画：1、看看最终的样子：Erik笑容的动画2、图片地址：http://ife.baidu.com/2016/static/img/erik_ce204002.jpg3、注意：不要使用 CSS animation，因为这里要学习的是使用 JS 来操作 CSS，而不是为了完成这个任务。不多说了，先上代码：<!DOCTYPE html><html lan...
复制链接

扫一扫