运动动画的初级制作

最新推荐文章于 2024-02-25 13:21:34 发布

jxy567

最新推荐文章于 2024-02-25 13:21:34 发布

阅读量186

点赞数

文章标签： js

本文链接：https://blog.csdn.net/jxy567/article/details/113923962

版权

  <style>
    #run {
      width: 167px;
      height: 323px;
      background: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1497192311,854923472&fm=26&gp=0.jpg) no-repeat;
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <div id="run"></div>
</body>

<script>
//初始化第一张图片的结束宽度
  var index = 0, width = 167;
  //提取元素
  var run = document.getElementById('run');
  function setBg() {
    index++;
    //index大于等于图片上动作的数量时，重置index
    if (index >= 3) {
      index = 0;
    }
    //计算图片位移的距离
    var left = 0 - index*width
    //将计算出来的移动的距离赋值到样式上，记得加上单位
    run.style.backgroundPosition =left+'px';//backgroundPosition ---定义背景图片的初始位置
  }
  //设置定时器
  window.setInterval(setBg,1000);
</script>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jxy567

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
运动动画的初级制作

<style> #run { width: 167px; height: 323px; background: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1497192311,854923472&fm=26&gp=0.jpg) no-repeat; border: 1px solid black; } </style&gt..
复制链接

扫一扫