M-web
-
了解touch事件的使用
-
独立完成jdM的轮播图
-
掌握区域滚动插件使用
-
了解手势事件的原理
-
安装less运行环境nodeJS
touch事件
触摸事件
| 事件 | 说明 |
|---|---|
| touchstart | 当手指触碰屏幕时候触发该事件 |
| touchmove | 当手指在屏幕上滑动时候触发该事件 |
| touchend | 当手指离开屏幕时触发该事件 |
| touchcancel | 当系统停止跟踪（被迫终止）触摸时候会触发。 |
触摸点集合
| 触摸点集合 | 说明 |
|---|---|
| targetTouches | 目标元素的所有当前触摸点集合 |
| changedTouches | 目标元素的最新更改的触摸点集合 |
| touches | 页面上的所有触摸点集合 |
注意：在touchend事件的时候event只会记录changedtouches
坐标组
| 点坐标 | 说明 |
|---|---|
| pageX/pageY | 基于页面大小的坐标 |
| clientX/clientY | 基于视口大小的坐标 |
| screenX/screenY | 基于屏幕大小的坐标 |
IScroll
插件介绍
区域滚动插件，对于移动端的页面滚动效果表现不一致，和需要上拉刷新上拉加载等效果的页面，可以帮助快速的实现滚动效果。
插件使用
IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。
尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。最佳的HTML结构如下：
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>iScroll作用于滚动区域的外层。在上面的例子中，UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略。
最基本的脚本初始化的方式如下：
<script type="text/javascript">
var myScroll = new IScroll('#wrapper');
</script>第一个参数可以是滚动容器元素的DOM选择器字符串，也可以是滚动容器元素的引用对象。下面是一个有效的语法：
var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);所以基本上你要么直接传递元素，要么传递一个querySelector字符串。因此可以使用css名称代替ID去选择一个滚动器容器,如下:
var myScroll = new IScroll('.wrapper');注意，iScroll使用的是querySelector 而不是 querySelectorAll，所以iScroll只会作用到选择器选中元素的第一个。如果你需要对多个对象使用iScroll，你需要构建自己的循环机制。
手势事件
轻触事件tap
出现的原因：由于早期移动端页面双击可以缩放，为了检测双击操作，延长了click的响应时间，200-300ms。
第一种解决方案：
/*模拟tap事件（tap在移动端库zepto.js有使用）*/
/*1. 响应的速度比click要快 150ms */
/*2. 不能滑动*/
var bindTapEvent = function (dom, callback) {
var startTime = 0;
var isMove = false;
dom.addEventListener('touchstart', function () {
startTime = Date.now();
});
dom.addEventListener('touchmove', function () {
isMove = true;
});
dom.addEventListener('touchend', function (e) {
if ((Date.now() - startTime) < 150 && !isMove) {
callback && callback.call(this, e);
}
startTime = 0;
isMove = false;
});
}第二种解决方案：
<!--
1 使用一个叫：fastclick.js 提供移动端click响应速度的
2 下载：https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
3 使用：
-->
<script src="../js/fastclick.min.js"></script>
<script>
/*当页面的dom元素加载完成 如果使用jquery $(function(){});*/
document.addEventListener('DOMContentLoaded', function() {
/*初始化方法*/
FastClick.attach(document.body);
}, false);
/*正常使用click事件就可以了*/
</script>手势事件swipe
手势事件：滑动，左滑，右滑，上滑，下滑 （swipe在移动端库zepto.js有使）
/*1. 理解移动端的手势事件*/
/*2. swipe swipeLeft swipeRight swipeUp swipeDown */
/*3. 左滑和右滑手势怎么实现*/
var bindSwipeEvent = function (dom,leftCallback,rightCallback) {
/*手势的条件*/
/*1.必须滑动过*/
/*2.滑动的距离50px*/
var isMove = false;
var startX = 0;
var distanceX = 0;
dom.addEventListener('touchstart',function (e) {
startX = e.touches[0].clientX;
});
dom.addEventListener('touchmove',function (e) {
isMove = true;
var moveX = e.touches[0].clientX;
distanceX = moveX - startX;
});
dom.addEventListener('touchend',function (e) {
/*滑动结束*/
if(isMove && Math.abs(distanceX) > 50){
if(distanceX > 0){
rightCallback && rightCallback.call(this,e);
}else{
leftCallback && leftCallback.call(this,e);
}
}
/*重置参数*/
isMove = false;
startX = 0;
distanceX = 0;
});
}
bindSwipeEvent(document.querySelector('.box'),function (e) {
console.log('左滑手势');
},function (e) {
console.log('右滑手势');
});分类页面
背景属性
在一个大的容器内正中间显示一个小的背景图
-
background-origin
-
背景平铺的起点
-
默认是从内边距开始平铺
-
padding-box 从内边距开始平铺
-
border-box 从边框开始平铺
-
content-box 从内容开始平铺
-
-
background-clip
-
背景图裁剪
-
默认的裁剪方式 边框以外的被裁剪
-
border-box 边框以外的被裁剪
-
padding-box 内边距以外的被裁剪
-
content-box 内容以外的被裁剪
-
完成移动端常见滑动效果，理解移动端手势事件原理，掌握常见的移动端布局方式。
"我是Spirit_Breeze,中文<晟世清风>,在这纷纷乱世之中,祈望能有一股清流之风."本人从事销售,不甘心于口舌之利,突然对代码和框架充满兴趣,遂之研究研究,欢迎研究讨论,转载请备注地址和作者,谢谢