移动端上下滑动问题swipe

新手上路,请多包涵

这个是要求一直滑动中间元素图片,形成一个可以上下滚动的状态 ,现在是将中间元素滑动上去以后,取消不了之前的事件,再滑动之前那个元素时还可以滑动,求大神帮忙解决下

function swipeShow() {

// 给class为slide_sub加上触滑监听事件
//事件,方向,距离(像素为单位),时间,手指数量
$("#slider .slide_sub:eq(1)").swipe({
    swipeUp:function (event, direction, distance, duration, fingerCount) {
            // event.stopPropagation();//阻止冒泡
            // event.preventDefault();//阻止浏览器默认事件
            var index = $(this).index();
            $(".cenTitle").fadeOut(300);

            var prevIndex = index - 1;
            var nextIndex = index + 1;

            // get prev element
            var pe = $("#slider .slide_sub:eq(" + prevIndex + ")");

            var pw = pe.width();
            var ph = pe.height();
            var pmt = pe.position().top;
            var pl = pe.position().left;
            // 概率圆样式
            var pp = pe.find('.probability');
            var ppw = pp.width();
            var pph = pp.height();
            var ppmt = pp.css('bottom');
            var ppl = pp.css('right');
            var pf = pp.css('font-size');

            // 概率数字样式
            var ps = pe.find('.probability span');
            var psb = ps.css('bottom');
            var psl = ps.position().left;

            // get next element
            var ne = $("#slider .slide_sub:eq(" + nextIndex + ")");

            var nw = ne.width();
            var nh = ne.height();
            var nmt = ne.position().top;
            var nl = ne.position().left;

            var np = ne.find('.probability');
            var npw = np.width();
            var nph = np.height();
            var npmt = np.css('bottom');
            var npl = np.css('right');
            var nf = np.css('font-size');

            var ns = ne.find('.probability span');
            var nsb = ns.css('bottom');
            var nsl = ns.position().left;

            // get obj element
            var ow = $(this).width();
            var oh = $(this).height();
            var omt = $(this).position().top;
            var ol = $(this).position().left;
            var oZindex = parseInt($(this).css("z-index"));

            var op = $(this).find('.probability');
            var opw = op.width();
            var oph = op.height();
            var opmt = op.css('bottom');
            var opl = op.css('right');
            var of = op.css('font-size');

            var os = $(this).find('.probability span');
            var osb = os.css('bottom');
            var osl = os.position().left;
            $(this).animate({
                width: pw,
                height: ph,
                top: pmt,
                left: pl,
                zIndex: oZindex - 1
            }, 300);

            op.animate({
                width: ppw,
                height: pph,
                bottom: ppmt,
                right: ppl,
                fontSize: pf,
            }, 300)

            os.animate({
                bottom: psb,
                left: psl,
            }, 300)

            ne.css({"z-index": oZindex});

            ne.animate({
                width: ow,
                height: oh,
                top: omt,
                left: ol
            }, 300, function () {
                $('.cenTitle').fadeIn()
            });

            np.animate({
                width: opw,
                height: oph,
                bottom: opmt,
                right: opl,
                fontSize: of,
            }, 300)

            ns.animate({
                bottom: osb,
                left: osl,
            }, 300)
            pe.css({"z-index": oZindex-1});
            pe.animate({
                width: nw,
                height: nh,
                top: nmt,
                left: nl
            }, 300, function () {
                $('.cenTitle').fadeIn()
            });
            pp.animate({
                width: npw,
                height: nph,
                bottom:npmt,
                right: npl,
                fontSize: nf,
            }, 300);

            ps.animate({
                bottom: nsb,
                left: nsl,
            }, 300);

            var pobj = $(this).parent();

            pobj.prepend($(this));// 将当前元素追加到父元素的顶部、
            pobj.append(pe);// 上一个元素追加到父元素的尾部

            // pobj.children().unbind("swipeUp");
            // pobj.children().unbind("swipeDown");
            pobj.children().unbind('swipe');
            console.log($(this).index()+'b');
            swipeShow();

    },

    swipeDown:function (event, direction, distance, duration, fingerCount) {
        // event.stopPropagation();//阻止冒泡
        // event.preventDefault();//阻止浏览器默认事件
        var index = $(this).index();
        $(".cenTitle").fadeOut(300);

        var prevIndex = index - 1;
        var nextIndex = index + 1;

        // get prev element
        var pe = $("#slider .slide_sub:eq(" + prevIndex + ")");

        var pw = pe.width();
        var ph = pe.height();
        var pmt = pe.position().top;
        var pl = pe.position().left;
        // 概率圆样式
        var pp = pe.find('.probability');
        var ppw = pp.width();
        var pph = pp.height();
        var ppmt = pp.css('bottom');
        var ppl = pp.css('right');
        var pf = pp.css('font-size');

        // 概率数字样式
        var ps = pe.find('.probability span');
        var psb = ps.css('bottom');
        var psl = ps.position().left;

        // get next element
        var ne = $("#slider .slide_sub:eq(" + nextIndex + ")");

        var nw = ne.width();
        var nh = ne.height();
        var nmt = ne.position().top;
        var nl = ne.position().left;

        var np = ne.find('.probability');
        var npw = np.width();
        var nph = np.height();
        var npmt = np.css('bottom');
        var npl = np.css('right');
        var nf = np.css('font-size');

        var ns = ne.find('.probability span');
        var nsb = ns.css('bottom');
        var nsl = ns.position().left;

        // get obj element
        var ow = $(this).width();
        var oh = $(this).height();
        var omt = $(this).position().top;
        var ol = $(this).position().left;
        var oZindex = parseInt($(this).css("z-index"));

        var op = $(this).find('.probability');
        var opw = op.width();
        var oph = op.height();
        var opmt = op.css('bottom');
        var opl = op.css('right');
        var of = op.css('font-size');

        var os = $(this).find('.probability span');
        var osb = os.css('bottom');
        var osl = os.position().left;

        var pobj = $(this).parent();
        $(this).animate({
            width: nw,
            height: nh,
            top: nmt,
            left: nl,
            zIndex: oZindex - 1
        },300);

        op.animate({
            width: npw,
            height: nph,
            bottom: npmt,
            right: npl,
            fontSize: nf,
        }, 300)

        os.animate({
            bottom: nsb,
            left: nsl,
        }, 300)

        ne.css({"z-index": oZindex - 1});

        ne.animate({
            width: pw,
            height: ph,
            top: pmt,
            left: pl
        }, 300, function () {
            $('.cenTitle').fadeIn()
        });

        np.animate({
            width: ppw,
            height: pph,
            bottom: ppmt,
            right: ppl,
            fontSize: pf,
        }, 300)

        ns.animate({
            bottom: psb,
            left: psl,
        }, 300)
        pe.css({"z-index": oZindex});
        pe.animate({
            width: ow,
            height: oh,
            top: omt,
            left: ol
        }, 300, function () {
            $('.cenTitle').fadeIn()
        });
        pp.animate({
            width: opw,
            height: oph,
            bottom: opmt,
            right: opl,
            fontSize: of,
        }, 300);

        ps.animate({
            bottom: osb,
            left: osl,
        }, 300);
        // 下一个元素追加到父元素的顶部
        pobj.prepend(ne);
        // 将当前元素追加到父元素的尾部
        pobj.append($(this));
        // pobj.children().unbind("swipeDown");
        // pobj.children().unbind("swipeUp");
        pobj.children().unbind('swipe');
        console.log($(this).index()+'a');
        swipeShow();

    },

});

}

阅读 2.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题