zoukankan      html  css  js  c++  java
  • touchSwipe 上下左右滑动,二指缩放 效果不好。

    $(function(){
    var _showImgW;
    var _showImgH;
    var _showImgMT;
    var _showImgML;
    $("#imgDiv").swipe({
    swipeStatus:function(event, phase, direction, distance , duration , fingerCount) {
    //$(this).find('#swipe_text').text("swiped " + distance + ' px');
    if(phase === $.fn.swipe.phases.PHASE_END || phase === $.fn.swipe.phases.PHASE_CANCEL) {
    //$(this).find('#swipe_text').text("No swipe was made");
    }
    if (phase == "start")
    {
    _showImgMT = $(this).find("._showImg").css("margin-top").replace("px", "");
    _showImgML = $(this).find("._showImg").css("margin-left").replace("px", "");
    }
    if (direction == "up" && (phase == "cancel" || phase == "end")) {
    //向上滑动 到顶
    var mt = _showImgMT + duration;
    //$(this).find("._showImg").css("margin-top",mt+"px");
    }
    else if (direction == "down" && (phase == "cancel" || phase == "end")) {
    //向下滑动 到顶
    var ml = _showImgML - duration;
    //$(this).find("._showImg").css("margin-left",ml+"px");
    }
    else if (direction == "left" && (phase == "cancel" || phase == "end")) {
    //向左滑动 到顶
    var ml = _showImgML - duration;
    //$(this).find("._showImg").css("margin-left",ml+"px");
    }
    else if (direction == "right" && (phase == "cancel" || phase == "end")) {
    //向右滑动 到顶
    var ml = _showImgML - duration;
    //$(this).find("._showImg").css("margin-left",ml+"px");
    }

    if (direction == "up" && phase != "cancel" && phase != "end") {
    //向上滑动过程中
    var h = $(this).find("._showImg").height();
    var mt = _showImgMT - duration;
    if(get_height_for_window()-h>mt)
    mt = get_height_for_window()-h;
    //$(this).find("._showImg").css("margin-top",mt+"px");
    $(this).find("._showImg").animate({ marginTop: mt + 'px' }, 100);
    }
    else if (direction == "down" && phase != "cancel" && phase != "end") {
    //向下滑动过程中
    _showImgMT = $(this).find("._showImg").css("margin-top").replace("px", "");
    var mt = _showImgMT + duration;
    if(mt<=0)
    mt = 0;
    //$(this).find("._showImg").css("margin-top",mt+"px");
    $(this).find("._showImg").animate({ marginTop: mt + 'px' }, 100);
    }
    else if (direction == "left" && phase != "cancel" && phase != "end") {
    //向左滑动过程中
    var w = $(this).find("._showImg").width();
    var ml = _showImgML - duration;
    if(get_width_for_window()-w>ml)
    ml = get_width_for_window()-w;
    //$(this).find("._showImg").css("margin-left",ml+"px");
    $(this).find("._showImg").animate({ marginLeft: ml + 'px' }, 100);
    }
    else if (direction == "right" && phase != "cancel" && phase != "end") {
    //向右滑动过程中
    _showImgML = $(this).find("._showImg").css("margin-left").replace("px", "");
    var ml = _showImgML + duration;
    if(ml<=0)
    ml = 0;
    //$(this).find("._showImg").css("margin-left",ml+"px");
    $(this).find("._showImg").animate({ marginLeft: ml + 'px' }, 100);
    }
    },
    pinchStatus:function(event, phase, direction, distance , duration , fingerCount, pinchZoom) {
    if(phase == "start") {
    _showImgW =$(this).find("._showImg").width();
    _showImgH = $(this).find("._showImg").height();
    }
    if(direction=="in")
    { //pinchZoom 缩放比例
    var w = _showImgW*pinchZoom;
    var h = _showImgH*pinchZoom;
    $(this).find("._showImg").css("width", w + 'px' );
    $(this).find("._showImg").css("height", h + 'px' );
    }
    else if(direction=="out")
    {
    var w = _showImgW*pinchZoom;
    var h = _showImgH*pinchZoom;
    $(this).find("._showImg").css("width", w + 'px' );
    $(this).find("._showImg").css("height", h + 'px' );
    }
    },
    swipe:function(event, direction, distance, duration, fingerCount) {
    //$(this).find('#swipe_text').text("You swiped " + direction + " with " + fingerCount + " fingers");
    },
    pinchIn:function(event, direction, distance, duration, fingerCount, pinchZoom) {
    $(this).find('#pinch_text').text("You pinched " +direction + " by " + distance +"px, zoom scale is "+pinchZoom);
    //ecg.alert(direction + " by " + distance +"px");
    //$(this).find("._showImg").animate({ -duration + 'px' }, 0);
    },
    pinchOut:function(event, direction, distance, duration, fingerCount, pinchZoom) {
    $(this).find('#pinch_text').text("You pinched " +direction + " by " + distance +"px, zoom scale is "+pinchZoom);
    //ecg.alert(direction + " by " + distance +"px");
    },
    fingers:'all'
    });
    });

  • 相关阅读:
    Go_海量用户即时通讯系统
    Golang redis学习指南
    Golang 操作_Redis
    十七、Redis
    十六、网络编程-tcp socket编程
    十五、反射
    十四、goroutine(协程)和channel(管道)
    Jmeter笔记(9)Jmeter 性能测试资源监控方法(本地与服务器)(转)
    Fiddler笔记(8)重装时清除已有证书及解决tunnel to 443问题
    Jmeter笔记(8)Jmeter与MySql连接
  • 原文地址:https://www.cnblogs.com/90nice/p/4737447.html
Copyright © 2011-2022 走看看