(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<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();
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,348评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,122评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,936评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,427评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,467评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,785评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,931评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,696评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,141评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,483评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,625评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,291评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,892评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,492评论 2 348

推荐阅读更多精彩内容

  • 移动端的常见事件 touchstart 手指按下时触发touchmove 手指移动touchend 手指抬起 p...
    llpy阅读 2,055评论 0 3
  • 1.Meta标签: 当页面在手机上显示时,增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1,并且文...
    谢小逸阅读 681评论 0 2
  • Meta标签: 这个想必大家都知道,当页面在手机上显示时,增加这个meta可以让页面强制让文档的宽度与设备的宽度保...
    iyimao阅读 337评论 0 1
  • META相关 1. 添加到主屏后的标题(IOS) 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕...
    老夫的天阅读 3,064评论 3 21
  • 又是开心的一天。 记营业部故事。 阿姨来找我们一个客户经理办业务,经过柜台时候,客户经理指着我们帅气的2号柜员讲这...
    欧阳新兰阅读 100评论 0 0