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

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

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

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

其中需要注意

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

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

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

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

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

任务

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

scrollTo(5000, 1);
?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?