-
调用封装好的swipe方法的scrollTo接口，来实现页面切换。查看全部
-
不错查看全部
-
animation活泼；生气<br> webkit,moz是不同浏览器的前缀 animation-name规定要绑定的keyframes的名称，为了日后的维护方便，一般都是取一个跟动作名称相近的名称<br> animation-duration规定完成这个动画所需的时间<br> wrap:外套 walk行走查看全部
-
absolute：绝对的；绝对的食物；完全的；查看全部
-
Sizzle：vi:发嘶嘶声;vt.把...烧得发嘶嘶声;n.嘶嘶声查看全部
-
页面之间的卷滚切换效果 页面的横向布局我们已经实现好了，那么如何实现页面与页面之间的切换呢？ 一般来说要根据布局的结构来，大体有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轴移动 });查看全部
-
CSS3动画效果属性 transition 4个属性 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。 [ 收起全文 ]查看全部
-
页面的横向布局 本章正式进入七夕这个主题效果是如何实现的讲解，首先回顾下视频的内容：整个效果都是以小男孩走路为前提，在三个主题页面中切换并在每个主题页面中会有不同的效果呈现 我们可以这样理解，效果上 页面主题会滚动 小男孩会走动 通过二者的速率变化，可以让用户产生一个视觉上的错觉，也可以称为视觉差，感觉就是人物在不断走路前行 从页面的效果，考虑页面整体布局结构应该需要这样 页面是一个横向的 包含了3个主题页面 页面之间是无缝拼接的 页面还要能滚动 布局上很好处理，我们做3个块级元素，每一个块元素代表一个主题页面的容器节点。然后设置一个父容器是3个块元素的宽，通过float处理，这样就形成了一个横向的3个无缝拼接的页面 页面布局结构如下 <ul class='content-wrap'> <!-- 第一副画面 --> <li> 页面1 </li> <!-- 第二副画面 --> <li> 页面2 </li> <!-- 第三副画面 --> <li> 页面3 </li> </ul> 这样虽然是形成了横向布局与无缝拼接，不过可视区范围永远只能显示出一个主题页面的尺寸，所以我们需要再给祖先节点上套一个限制显示区域的节点 在实现上，通过CSS布局是可以直接处理的。本课程中做了自适应页面布局的处理，为了更精确页面的尺寸，这里采用JavaScript动态计算绝对的尺寸 具体的实现我们参考右边的代码区域 任务 打开index.html文件，在代码的24行填入相应代码，通过溢出隐藏多余的页面 hidden 在80行填入相应代码，通过JS动态设置每一个元素的尺寸 slide.css({ width : width + 'px', height : height + 'px'查看全部
-
第八部分查看全部
-
第七部分查看全部
-
第六部分查看全部
-
第五部分查看全部
-
第四部分查看全部
-
第三部分查看全部
-
第二部分查看全部
举报
0/150
提交
取消