为了账号安全,请及时绑定邮箱和手机立即绑定
  • 实现页面与页面间的切换 一般来说要根据布局的结构,分为两种: 1.移动父容器,改变父容器的坐标 2.移动每个子容器的坐标 改变坐标的处理分为2种: 1.传统的top,left坐标修改 2.CSS3中的transform属性 transform属性向元素应用2D或3D转换,该属性允许我们对元素进行旋转、缩放、移动或倾斜。其中会有一个值translate3d(x,y,z)是用来控制元素的位置在页面上的三轴的位置的,translate3d这里就指明了3d就是启用了3d加速,也就是启动了GPU来处理。
    查看全部
  • CSS3引入了一个新的属性Transform: transform 属性向元素应用 2D 或 3D 转换,该属性允许对元素进行旋转、缩放、移动或倾斜。其中有一个值translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的,translate3d这里指明了3d就是启用了3d加速,即启动GPU来处理,性能更强; transition可以设置一些具体的参数,比如动画执行的时间,变化的算法、动画延时等等。 注意:transform属性是静态属性,不是动画属性,一旦写到style里面,将会直接显示作用,无任何变化过程。 简单的一句话描述就是: 通过设置transition的一些参数,让translate3d这个属性发生变化。
    查看全部
  • 可以
    查看全部
    0 采集 收起 来源:课程简介

    2015-08-10

  • 本课程中做了自适应页面布局的处理,为了更精确页面的尺寸,这里采用JavaScript动态计算绝对的尺寸v
    查看全部
  • 一般来说运动的状态都是需要可控的,这样才方便我们做进一步的操作。 【animation的暂停方式】 CSS3的animation直接提供一个animation-play-state的样式来控制动画的暂停处理。增加一个控制暂停样式,写动画样式的时候特别注意下不同浏览器的兼容性,加上对应的前缀 .pauseWalk { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; } 只需要在对应的有animation动画人物元素节点上,通过动态增加删除这个样式就可以控制这个精灵的开始与暂停了,非常简单 transition的暂停方式 至于transition,一般来说要暂停的地方都是一开始就程序设定好的目标点,因此这个其实是不需要控制的,这个也没办法控制,这个是一个动画过渡的效果,浏览器只提供了一个动画结束的回调。当然可以有一个变通的办法,做一个强制改变目标过渡值的处理 如何操作: 具体可以看右边的代码块,暂停方法内transition强制做了一个设置left坐标的处理,达到一个暂停的效果,但是这样是有问题的,下一次的启动必须等上一次动画的时间结束 不难看出animation要比transition强大多了
    查看全部
  • 【给祖先节点上套一个限制显示区域的节点】 这样虽然是形成了横向布局与无缝拼接,不过可视区范围永远只能显示出一个主题页面的尺寸,所以我们需要再给祖先节点上套一个限制显示区域的节点 在实现上,通过CSS布局是可以直接处理的。本课程中做了自适应页面布局的处理,为了更精确页面的尺寸,这里采用JavaScript动态计算绝对的尺寸
    查看全部
  • 动画主要知识点
    查看全部
    0 采集 收起 来源:编程节奏

    2015-08-08

  • jq回调函数接口 Deferred 步骤: var dtd = $.Deferred(); //创建 dtd.resolve(); //成功 dtd.then() //执行回调
    查看全部
  • CSS Sprites在国内很多人叫CSS精灵,其实这个技术不新鲜,原理就是:靠不断的切换图片让人感觉视觉上不断在变化,例如gif动画之类的效果
    查看全部
  • 页面布局与切换是一个整体,我们想调用切换的时候,并不关心其内部处理的手段,所以我们只需要提供一个可以调用的接口就可以,新建一个Swipe.js文件,内部定义一个Swipe工厂方法,内部会产生一个swipe的滑动对象,暴露了scrollTo的接口
    查看全部
  • 页面布局与切换是一个整体,我们想调用切换的时候,并不关心其内部处理的手段,所以我们只需要提供一个可以调用的接口就可以,新建一个Swipe.js文件,内部定义一个Swipe工厂方法,内部会产生一个swipe的滑动对象,暴露了scrollTo的接口
    查看全部
  • 封装,即隐藏对象的属性和实现细节,仅对外公开接口。
    查看全部
  • 一、结构的搭建与切换 页面的横向布局 页面之间的卷滚切换效果 页面切换部分的代码封装 二、小男孩的动作实现与封装 布局与自适应调整 精灵动画的实现 走路的实现 运动的状态控制 路径动画的坐标设计 三、第一幅图 太阳的结构与动画效果 云的结构与动画效果 四、第二幅图 页面布局搭建 开关门效果的实现 灯光处理 灯光效果的实现 人物进出商店的坐标计算 等待取花 鸟动画的实现 六、第三幅图 页面的布局 星星与水波 运动个轨迹处理 等待取花 鸟动画的实现
    查看全部
    1 采集 收起 来源:编程节奏

    2015-08-07

  • 一、结构的搭建与切换 页面的横向布局 页面之间的卷滚切换效果 页面切换部分的代码封装 二、小男孩的动作实现与封装 布局与自适应调整 精灵动画的实现 走路的实现 运动的状态控制 路径动画的坐标设计 三、第一幅图 太阳的结构与动画效果 云的结构与动画效果 四、第二幅图 页面布局搭建 云的结构与动画效果 四、第二幅图 页面布局搭建 开关门效果的实现 灯光处理 灯光效果的实现 人物进出商店的坐标计算 等待取花 鸟动画的实现 六、第三幅图 页面的布局 星星与水波 运动个轨迹处理 等待取花 鸟动画的实现
    查看全部
    0 采集 收起 来源:编程节奏

    2015-08-07

  • 这是纪录哪个节吗?
    查看全部

举报

0/150
提交
取消
课程须知
本课程为高级案例课程,其中所用的大部分知识点不做深入剖析,只讲解如何使用,部分代码需要由你自己填充。 需要具备如下知识: 1、HTML4、HTML5 2、CSS2、CSS3 3、JavaScript、jQuery 4、面向对象思想
老师告诉你能学到什么?
1、如何实现页面的无缝滚动 2、如何实现视觉差效果 3、异步编程处理 4、CSS3动画过渡 5、JS动画实现 6、H5的音乐效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!