页面之间的卷滚切换效果，H5+JS+CSS3实现七夕言情教程-慕课网

页面之间的卷滚切换效果

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

一般来说要根据布局的结构来，大体有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轴移动
});

?不会了怎么办

||

index.html

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>慕课七夕主题</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style type="text/css"> * { padding: 0; margin: 0; } ul, li { list-style-type: none; } #content { width: 100%; height: 100%; /* top: 20%; left: 20%; */ overflow: hidden; position: absolute; } .content-wrap { position: relative; } .content-wrap > li { background: #CAE1FF; color: red; float: left; overflow: hidden; position: relative; } li:nth-child(2) { background: #9BCD9B; } li:nth-child(3) { background: yellow; } button { width: 100px; height: 50px; } .button { position: absolute; bottom: 0; } </style> </head> <body> <div id='content'> <ul class='content-wrap'>  <li> 页面1 </li>  <li> 页面2 </li>  <li> 页面3 </li> </ul> <div class="button"> <button>点击切换页面</button> </div> </div> <script type="text/javascript"> var container = $("#content"); // 获取第一个子节点 var element = container.find(":first"); // li页面数量 var slides = element.find("li"); // 获取容器尺寸 var width = container.width(); var height = container.height(); // 设置li页面总宽度 element.css({ width: (slides.length * width) + 'px', height: height + 'px' }); // 设置每一个页面li的宽度 $.each(slides, function(index) { var slide = slides.eq(index); // 获取到每一个li元素 slide.css({ // 设置每一个li的尺寸 width: width + 'px', height: height + 'px' }); }); // 绑定一个事件，触发通过 $('button').click(function() { // 在5秒的时间内，移动X的位置，为2个页面单位 //? }); </script> </body> </html>

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

||

2-2 页面之间的卷滚切换效果