七夕项目js实现-3-3

3-3走路的实现

前言

这节课很简单,是旧知识的温习,没新内容。与第二节【2-2页面之间的卷滚切换效果】中的实现一样,2-2中是让背景动起来,本节是让人物动起来,道理是一样的。我只贴出css3的实现,js实现请回看2-2。我可以把思想说下,就是利用定时器循环调用js方法,去改变boy这个div 的left值。
注:每节课的代码都是copy上一节的代码基础上改的,看不懂请回退。
所有章节,与慕课上的章节一一对应。慕课地址:传送门 走你!

撸代码

css代码:增加一个类

1
2
3
4
.boy_move{
transition: all 2s linear ;
transform: translateX(300px);
}

js代码:点击按钮后给boy加上这个class

1
2
3
4
5
6
7
8

var button = document.getElementsByTagName('button');
// 绑定一个事件,触发通过
button[0].addEventListener('click', function () {
boy.classList.add('boy_go');
boy.classList.add('boy_move');
})
</script>

也可以像2-2中讲到的方式:boy.style.transition='all 2s linear',这样加也可以。

结束语

本节没什么可说的,留言吧。。。

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