(17.05.19)移动端touch、移动端拖拽、多物体拖拽、移动端轮播图、移动端的库

jsonp

因为jsonp不是使用XMLHttpRequest对象


在移动端不用鼠标事件
    touch事件        只能用事件绑定添加
    touchstart        手指按下

        var oTouch = ev.targetTouches[0];
        oTouch.pageX/pageY;

    touchmove        手指移动

        var oTouch = ev.targetTouches[0];
        oTouch.pageX/pageY;

    touchend        手指离开

        var oTouch = ev.changedTouches[0];

移动端拖拽:

    不推荐使用left、top
    推荐:
    -webkit-transform:translate();
    获取transform的值
        matrix(1, 0, 0, 1, 0, 0)

        transform的值不好获取。

    一切卡顿问题都用:
        3D加速解决
        translate3d(x,y,z);

    多物体拖拽:
        要确保移动和抬起的时候,操作的还是按下的手指。

    每个手指的身份标识
        oTouch.identifier


移动端轮播图
    判断是否改变iNow
        Math.abs(按下和抬起之间的差)就是移动距离

        判断上一张还是下一张
            往左拖拽
                downX>endX
                下一张    iNow++;
            往右拖拽
                downX
                上一张    iNow--;

            走多远
                -iNow*oLi.offsetWidth;


移动端用的库

    zepto       玩法跟jquery一模一样
    官网:
        http://zeptojs.com/
    划分模块
        zepto           ✔       核心
        event           ✔       提供了on和off
        ajax            ✔       可以ajax交互
        form            ✔       可以操作form
        ie              ✔       ie兼容
        detect          检测设备浏览器信息
        fx              可以用动画
        fx_methods      show/hide/toggle/fade*都有动画  
        assets          解决IOS内存bug
        selector        提供伪类选择器
        touch           触控
        gesture         手势
var json = {
    show:function(a){
        alert(a);
        delete arguments[1].age;
        return arguments[1].showName;
    },
    person:{
        name:'123',
        age:18,
        showName:function(){
            alert(this.age);
        }
    }
};
alert(json.show(12,json.person)());

12  undefined   undefined

var num;

num = 11;
if(num%2){
    function show(){
        alert('奇数');
    }
}else{
    function show(){
        alert('偶数');
    }
}
show();

你可能感兴趣的:((17.05.19)移动端touch、移动端拖拽、多物体拖拽、移动端轮播图、移动端的库)