走路的实现，H5+JS+CSS3实现七夕言情教程-慕课网

第8章背景音乐
编程：8-1 HTML5 audio

走路的实现

用精灵实现了人物脚步的变化，这样还不行，人物看起来还只是原地在踏步，如果要人物有走动的效果需要让人物坐标变化起来，3-2节介绍了让坐标变化的2种方式

传统的top,left坐标修改
CSS3中的transform属性

这里采用修改坐标left的方式让人物变动，为什么不采用translate？其实都可以，做案例就尽可能的用不同的方法来实现。

这里采用了CSS3的transition来修改left的值，同样原理3-2节也介绍了，我们这里引入了一个插件jquery.transit，这个就是具体封装了transition的CSS3过渡动画的实现

接下来代码部分就非常简单了

transition的使用与jQuery提供的animate()方法基本差不多，所以使用上很容易接受

$boy.transition({
    'left': $("#content").width() + 'px',
}, 10000,'linear');

我们只要给出left的坐标值，同时给出变化的时间就让人物动了，结合一下精灵动画，是不是看起来人物走路在感觉就是那么回事了？

具体的实现看右边编辑区，通过点击开始走路按钮，实现人物走路效果

任务

打开index.html文件，在代码的61行填入相应代码，通过transition渐变的方式让人物走动

$boy.transition({
    'left': $("#content").width() + 'px',
}, 10000, 'linear', function() {});

?不会了怎么办

index.html
style.css
pageA.css
Swipe.js

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
* {
       padding
       : 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
/*背景图*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
/////////
//页面滑动 //
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

问答
评论
笔记
资料下载
代码

全部精华我要发布

小男孩不见了

+ 我来回答回答最高可+2积分

2 回答 1200 浏览

2022-03-30

小男孩的腿在此章节不是运动的吗？

最新回答 / 想转IT的机械狗

你可以在boy那个div里面吗加上slowWalk这个类然后小男孩就开始走了或者说你用js代码加上classname也是可以的顺便说一句这段代码里边transtion是错误的应该是animate

2 回答 1529 浏览

2018-09-04

点击人没走

最新回答 / 石头的守望

哦，明白了

1 回答 1248 浏览

2018-08-03

怎么让transition适应chrome浏览器

最新回答 / 慕码人0780579

-webkit

1 回答 1429 浏览

2018-04-23

transition的left距离不是渐变，而是直接就到了末尾

最赞回答 / qq_风中追风_8

.right-move{
    position: absolute;
    background: rebeccapurple;
    width: 100px;
    height: 100px;
    transition: left 1s ease-in;
    left: 0; //  加了这个就可以
}
.right-move:hover{
    left: 100...

2 回答 2860 浏览

2019-09-15

<script type="text/javascript" src="http://img.mukewang.com/down/55ac9ea30001ace700000000.js"></script>这个库是在哪找的？

最新回答 / 慕娘8138075

这里只用了两个库，一个jquery，一个jquery.transit，这应该是其中之一

1 回答 2429 浏览

2017-11-11

transition方法报错

最新回答 / 空山3220792

将<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>加在最外层<.div>之后就可以了

2 回答 1384 浏览

2017-08-14

left属性问题

最新回答 / 清风DEMO

哦哦我知道了

1 回答 679 浏览

2017-04-03

点击开始走路没有用！！

已采纳回答 / code哒哒

这个是 jquery.transit.js 文件中定义的

2 回答 1835 浏览

2017-03-26

点击开始走路，小人不见了

最新回答 / qq_尊爵Miku_0

靠人不如靠自己，存在浏览器缓存问题，从网上下载jquery.transit 外部连入，清除缓存就ok了

1 回答 940 浏览

2017-02-16

请问这个库http://img.imooc.com/down/55ac9ea30001ace700000000.js有什么作用？

最新回答 / 慕运维8167877

应该是个运动的库，跟jquery中的animate一样

1 回答 839 浏览

2017-01-20

大家怎么解决transit库的问题，找了好多地方，都找不到有用的transit库

已采纳回答 / 撕烤兔

<...code...>如果不指定地址，默认是指该 js 文件与 html 文件相同目录。这么写，你就需要首先下载文件到本地。如果想使用 cdn ，则可以在 src 属性中指明 url<...code...>

3 回答 1515 浏览

2017-04-27

为什么背景图片用的url地址显示不出来，求大神解答，代码抄老师的？？？？？

已采纳回答 / 一滴水墨92

<...图片...>你的布局里就没导入背景图片，所以不可能有背景图如：这样<div class="a_background"> <div class="a_top"></div> <div class="a_middle"></div> <div class="a_bottom"></div></div>

4 回答 4087 浏览

2016-12-30

我使用谷歌浏览器，运行封装后的接口walkTo(2000, 0.2)时会卡在这里，是不是不兼容啊

已采纳回答 / 慕无忌1013911

同用谷歌，兼容的

1 回答 1086 浏览

2016-11-09

function(){}函数里边的作用市什么，是返回吗

已采纳回答 / 马达加斯加的冷静星4335500

这只是嵌套在第一个function里面的function没有什么用没有返回值

1 回答 1228 浏览

2016-11-04

全部我要发布

最热最新

只看我的

七夕主题课程素材图片立即下载
七夕主题课程音乐素材立即下载

3-3 走路的实现