美文网首页
(17.05.19)移动端touch、移动端拖拽、多物体拖拽、移

(17.05.19)移动端touch、移动端拖拽、多物体拖拽、移

作者: 张不困_ | 来源:发表于2017-11-19 15:17 被阅读0次

    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<endX
                    上一张    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、移动端拖拽、多物体拖拽、移

          本文链接:https://www.haomeiwen.com/subject/dftpvxtx.html