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

页面之间的卷滚切换效果

页面的横向布局我们已经实现好了,那么如何实现页面与页面之间的切换呢?

一般来说要根据布局的结构来,大体有2种:

  • 移动父容器,改变父容器的坐标
  • 移动每一个子容器的坐标

显而易见,移动父容器简单很多,只需要改变父容器X轴的坐标就可以了。如果父容器中子元素有很多的话,那么我们会考虑第二种算法,可以做成动态加载,但是这种处理是超级麻烦,这里不讨论

改变坐标的处理可以分为2种:

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

传统的就是修改元素style是坐标属性,这个没什么好说的,使用简单,一般都需要配合定时器使用。

CSS3引入了一个新的属性Transform

transform 属性向元素应用 2D 或 3D 转换,该属性允许我们对元素进行旋转、缩放、移动或倾斜。其中会有一个值translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的,translate3d这里指明了3d就是启用了3d加速,也就是启动GPU来处理,性能更强

过去,为了实现这种平滑的过渡效果,我们需要借助于Flash技术,现在只需要简单的使用CSS3 Transition的方法就可以实现,这是一个简单的动画属性

transition可以设置一些具体的参数,比如动画执行的时间,变化的算法、动画延时等等,具体大家可以搜索更细致的资料

这里需要特别注意的就是:

transform属性是静态属性,不是动画属性,一旦写到style里面,将会直接显示作用,无任何变化过程

简单的一句话描述就是

通过设置transition的一些参数,让translate3d这个属性发生变化

如何通过translate结合transition改变元素的页面位置,我们具体看到右边的代码

通过点击"点击页面开始切换"出现页面切换的效果

任务

打开index.html文件,在代码的102行填入相应代码,这样能让页面开始滚动

element.css({
    'transition-timing-function': 'linear',
    'transition-duration': '5000ms',
    'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)' //设置页面X轴移动
});
?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

举报

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

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?