课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

没出现效果

来源：1-1 认识帧动画

离歌笑_0002

2016-06-03 10:30

<!DOCTYPE html>

<html lang ="en">

<head>

<meta charset="UTF-8">

<title>动画demo</title>

<link rel="stylesheet" href="demo.css">

</head>

<body>

<div id="rabbit"></div>

<script src="demo.js"></script>

</body>

</html>

/*--------------------css------------*/

#rabbit{

width:80px;

height:102px;

}

/*------js--------*/

var imgUrl ='rabbit.png';

var positions = ['0 -854','-174 -852','-349 -852','-524 -852','-698 -852','-873 -848'];

var ele = document.getElementById('rabbit');


animation(ele,positions,imgUrl);

function animation(ele,positions,imgUrl)

{

ele.style.backgroundImage = 'url('+ imgUrl + ')';

ele.style.backgroundRepeat = 'no-repeat';

var index = 0;

function run()

{

var position = positions[index].split(' ');

ele.style.backgroundPosition = position[0] + 'px ' + position[1] + 'px';

index++;

if(index >= positions.length){

index = 0;

}

setTimeout(run,80);

}

run();

}


写回答 关注

4回答

  • qq_faithfriend_0
    2016-06-09 13:35:46
    已采纳

    明白了这里position[0] + 'px '有空格

    1 1

    离歌笑_00...

    非常感谢！

    2016-07-19 14:18:27

    共 1 条回复 >

  • 极客教程
    2016-06-14 11:40:29

    真的是细节很重要!!!

    0 1
  • qq_faithfriend_0
    2016-06-09 12:23:27

    我的可以显示图片就是没有动画效果

    0 0
  • qq_半盏茶_03334446
    2016-06-03 22:05:27

    代码没问题，你检查一下是不是图片路径的错误，或者是图片的文件名不对

    0 0

原生 JS 实现帧动画库

了解如何用原生JS实现酷炫的帧动画，吸引他她的注意

47188 学习 · 92 问题

查看课程

相似问题

js代码是否有问题没有效果

回答 2

在Webstorm直接运行不出结果

回答 1

我想在某一帧动画效果添加延时应该怎么做呢？

回答 1

无限重复同步任务出现Bug(无尽递归too much recursion)

回答 1

module.exports和require能生效吗？

回答 2

打开慕课网App查看更多内容