经典案例-宏基暑促(第2天)
• 技术要点：iscoll提供一种原生的方式来支持在一个固定高度的容 器内滚动内容， 它的使用结构如下所示：
经典案例-宏基暑促(第2天)
• 技术要点： iScroll 第一个参数是外容器的id，或者css语法格式 的class，第二个参数允许你自定义一些属性配置：
参数名称 hScrollbar vScrollbar zoom doubleTapZoom 说明 是否显示水平滚动条 是否显示垂直滚动条 是否放大 双击放大倍数 参数值 false 否 true 是 false 否 true 是 false 否 true 是 数字值 默认值 true true false 2
stop
立即停止动画
经典案例-甲壳虫汽车(第3天)
• 技术要点： megapix-image插件,使用Canvas压缩图片上传解决 手机端图片上传功能的问题：
经典案例-甲壳虫汽车(第3天)
• 技术要点： 微信分享：
• 1. 开发前提条件 • 申请服务号、服务功能的开通、域名绑定 • 2. 技术开发流程 • 帐号--》token值--》tickt值--》config使用 • 3. 注意事项 • 域名必须通过验证、error事件中重置tickt值 • 示例演示说明t1wx.html

target
触目的DOM节点目标
screenY
触摸目标在屏幕中的y坐标
经典案例-小鲜手机(第1天)
• 技术要点：示例代码。
经典案例-宏基暑促(第2天)
• 技术要点：地理定位和移动端左右滑动的效果，使用iscoll插件实 现在移动端的元素滑动，它的特点有：
缩放 拉动刷新 速度和性能提升 自定义滚动条 精确捕捉元素
经典案例-宏基暑促(第2天)
• 技术要点： iScroll 除实现一些配置之外，还提供了很多方法API： 通过它们可以大大加快开发进度。
API名称 refresh scrollTo scrollToPage 说明 当你的滚动区域的内容发生改变 或是 滚动区域不正确，通过调用refresh 来 使得iscroll 重新计算滚动的区域，包括滚动条使得iscroll 适合当前的dom。 这个方法接受4个参数 x, y, time, relative x 为移动的x轴坐标，y为移动的y 轴坐标, time为移动时间，relative表示是否相对当前位置。 三个参数(pageX,pageY,time) 当滚动内容的高宽大于滚动范围时，iscroll 会自动分页，使用scrollToPage方法滚动到页面。当hscroll 为false 的时候， 不能左右滚动。pageX这个参数就失去效果
经典案例-小鲜手机(第1天)
• 技术要点：touches表示当前跟踪的触摸操作的touch对象的数 组，每个Touch对象包含的属性如下。
属性名称 clientX clientY identifier 说明 触摸目标在视口中的x坐标 触摸目标在视口中的y坐标 标识触摸的唯一ID 属性名称 pageX pageY screenX 说明 触摸目标在页面中的x坐标 触摸目标在页面中的y坐标 触摸目标在屏幕中的x坐标
经典案例-晨阳水漆(第4天)
• 技术要点：实现圆形的刮痕，进行刮痕面积的计算，刮掉了70% 的内容区域，则全部显示出来。
结束语
前端开发最基础的HTML结束了，它是所有 页面开发的基础，大家要重点巩固下它。
经典案例(第1天)
• 1. 小鲜手机 • 2. 宏基暑促 • 3. 甲壳虫汽车 • 4. 晨阳水漆 • 5. 亮视点游戏 • 6. 自然之宝
经典案例-小鲜手机(第1天)
• 技术要点：触摸事件(touch)会在用户手指放在屏幕上面的时候、 在屏幕上滑动的时候或者是从屏幕上移开的时候触发。
事件名称 touchstart touchmove touchend touchcancel 说明 当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用 preventDefault()事件可以阻止滚动。 当手指从屏幕上离开的时候触发 当系统停止跟踪触摸的时候触发