七夕项目js实现-3-2

3-2精灵动画的实现

前言

本节课重点难点是css3部分,其实说难,是相对的,对比无脑的写个<div></div>标签要难些。明白css3 animation用法也就很简单了。置于雪碧图原理没什么,就是把一堆小图放在合成在一张图片上,减少http请求数,做前端性能优化用。然后主要通过background-repeatbackground-position定位你要显示那一块小图。
注:每节课的代码都是copy上一节的代码基础上改的,看不懂请回退。
所有章节,与慕课上的章节一一对应。慕课地址:传送门 走你!

撸代码

为了不造成干扰,我只把关键代码贴出:

1
2
3
4
5
6
7
8
9
<script> 
//上面代码省略。。。
var button = document.getElementsByTagName('button');
// 绑定一个事件,触发通过
button[0].addEventListener('click', function () {
//点击按钮后给boy添加一个class
boy.classList.add('boy_go');
})
</script>

添加的css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.boy_go {
//这是定义一个动画的效果:动画名称,动画时间,动画效果,动画次数等
animation: boy_walk 950ms step-start infinite;
}
@keyframes boy_walk {
0% { //这是定位图片。当动画执行到百分之多少的时候,显示什么。
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}

其实关键css代码就这么点,但为了兼容性,在前面加-moz-,兼容Firefox,加-webkit-兼容其他,把上方css代码复制两遍,加上-moz--webkit-前缀就是原教程的代码。

结束语

本节课其实也可以使用js+定时器代替css3。也比较简单,中心思想就是:每隔X毫秒,boy这个div的className要变一次。上方实现走路用了四个background-position定位,你大可以写四个class,用定时器和js替换class。

代码我已上传百度云盘,欢迎大家下载查看。。。
链接:http://pan.baidu.com/s/1nvt9Qsh 密码:pexw
如有疑问请在下方留言。。。