来帮同学解答一个问题
+30经验 +1积分

 

去回答
章节
问答
课签
笔记
评论
占位
占位

页面与人物之间形成的视觉差效果

最核心的2个部分，页面与人物的一些知识点都以及分解过了，包括代码都封装好了,接下来开始一些逻辑上的处理了

以小男孩走路变化，页面就跟着变化，两个元素用不同的速率变化就会产生视觉差的效果，感觉人物就是走了几个页面

其中需要注意

  • 小男孩的走路区间只是一个页面单位，相对点是父级的div
  • 页面滚动只有二个页面单位，因为本身会占据一个

注意以上这两点主要是为了设置比例的问题

  • 小男孩如果走到中间位置，那么比例是0.5 换算下就是  0.5*页面宽度
  • 页面要到中间位置就是，比例是1，换算就是 1*页面宽度

具体实现我们看下右边的代码区域：

采用接口编程的方式这里就体现出来了，当小男孩走完第一段路的时候，调用页面接口让页面开始滚动，之后通过boy.walkTo继续让小男孩走路，我们只需要给小男孩与页面设置同样的位置与时间，那么他们内部都会自己去计算，调用者只需要调用 scrollTo(5000, 1) 传递一下时间与页面比例，页面就会自动的滚动到指定的区域，我们也不需要关心具体的实现细节了，这就是面向接口编程的好处

任务

打开index.html文件，在代码的60行填入相应代码，可以观察到页面滚动，产生视觉差效果

scrollTo(5000, 1);
?不会了怎么办
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/**
* 小孩走路
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/////////
//页面滑动 //
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
* {
padding
       : 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/*背景图*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证，完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后，能更快找到我哦～

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后，及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

页面滚动问题.

最新回答 / 代码需要开源
是不是没有定义
var container = $("#content");
如果不是的话，把全部代码都粘贴我看看
1 回答 906 浏览
2019-06-19

背景切换怎么不对啦

最新回答 / 代码需要开源
楼上说的对，没有正确导入CSS或者js，第二个，第三个背景本身就没有            <!-- 第二副画面 -->            <li onclick="change(1)"> 页面2 </li>            <!-- 第三副画面 -->            <li onclick="change(2)"> 页面3 </li>
2 回答 1050 浏览
2019-06-19

第一个then调用的是scrollTo()函数，它返回的是Swipe对象，并没有返回deferred对象，那为什么还可以接着链式调用第二个then

已采纳回答 / 浅笑陌路繁华0
可以链式调用then，是在你创建啦生成Deferred对象，你可以看一下前面将的异步编程处理
1 回答 1704 浏览
2017-02-22

错误提示then没有定义，可是我都是按老师的来的

最新回答 / qq_牛奶_6
我的也是 为什么啊
3 回答 1019 浏览
2017-08-16

为什么一直都没有向前走动的效果啊

最新回答 / 神一樣的男人3392911
页面中按F12看看报什么错误
2 回答 852 浏览
2017-04-28

页面滚动效果

最新回答 / 慕粉3172815
代码发上来看一下
1 回答 945 浏览
2016-08-23

求助关于transition这段代码，帮忙解释下，看不太懂

已采纳回答 / _生洧迩
过度   旋转  带有参数
1 回答 924 浏览
2019-08-28

有源码分享吗

最新回答 / 非典型材料IT男
<...code...>   加入了一些自己的小修改。后期会进一步优化以及加上更多效果。 欢迎star  欢迎fork
2 回答 863 浏览
2017-05-03

按照调用关系，效果上应该是应该是什么样的？

最赞回答 / proto
<...图片...>小男孩走完第一段路后开始调用第一个then，第一个then调用完后就开始调用第二个then了；这样等于说是小男孩跟div一起移动了5秒；最后小男孩跟div之间多出来了0.5个页面的相对距离。
1 回答 1058 浏览
2018-09-03

scrollTo（5000， 1）这个为啥没有return 而且感觉不是scrollTo走完下面才走的，像是同步

最新回答 / PdpdPdpd
return了也不会影响同时执行，因为scrollTo函数中没有Deferred对象。
3 回答 1258 浏览
2016-08-23

为什么我的页面没有滚动起来啊，然后直接运行结果也没有效果

最赞回答 / 别担心_有我陪着你
你是不是用本地浏览器看的效果，如果是的话，是因为浏览器的兼容问题，在swipe.js中，加上浏览器兼容性，代码如下 // 监控完成与移动    swipe.scrollTo = function(x, speed) {        // 执行动画移动        element.css({            'transition-timing-function' : 'linear',            '-moz-transition-timing-function': linear, /...
4 回答 1000 浏览
2022-09-10

deffered then问题

最新回答 / 艾伦Aaron
在第一then完成之后，才会直接第二个then这里要注意 return boy.walkTo(5000, 0.5);  这个是返回一个新的defferred对象，  这个理解有点困难，可以去仔细看看API
1 回答 1184 浏览
2016-08-23

scrollTo参数

+ 我来回答 回答最高可+2积分
5 回答 4259 浏览
2022-07-19
全部 我要发布
最热 最新
只看我的

推荐课程

推荐路线系统化学习，打造阶梯学习模式

相关课程

手记推荐

更多

本次提问将花费2个积分

你的积分不足，无法发表

为什么扣积分？
确认 取消

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分？
确认 取消

账号登录 验证码登录

遇到问题
忘记密码

登录即同意慕课网《隐私政策》
代码语言