左滑插件

用法：

给需要添加左滑功能的元素添加以下属性：

data-swipe-item

给左滑显示出来的元素添加如下属性：

data-swipe-item-fixel

源码：

 

;(function (window, document, $, undefined) {
    "use strict";
    var startPoint,
        $currentEl,
        $fixEl,
        moving = false,
        $rootEl = $(document.documentElement),
        openSwipeEl = null,
        $callback = function(){};

    function touchMove(event) {
        var touch = event.touches[0],
            diffX = touch.clientX - startPoint.x,
            diffY = Math.abs(touch.clientY - startPoint.y),
            fixElWidth = $fixEl.width(),
            translated,
            translatedLeft = ($currentEl.data("translatedLeft") || 0) + diffX;

        if (translatedLeft > 0) {
            translatedLeft = translatedLeft / 10;
        } else if (translatedLeft < -fixElWidth) {
            translatedLeft = -fixElWidth;
        }

        $currentEl.data("isShow", translatedLeft < -fixElWidth * 0.5);

        translated = "translate3d(" + translatedLeft + "px,0,0)";


        // 阻止默认行为，用于修复android4下不会触发touchend事件的bug,针对android且为左滑状态时，才阻止默认事件
        if($$.isAndroid() && diffX < -5 && diffY < 5){
            $currentEl.css({
                "-webkit-transform": translated,
                transform: translated
            });
            event.preventDefault();
        }else if(!$$.isAndroid()){
            $currentEl.css({
                "-webkit-transform": translated,
                transform: translated
            });
        }
        openSwipeEl = $currentEl;
    }

    function touchEnd(event) {
        $rootEl.off("touchmove", touchMove);
        $rootEl.off("touchend", touchEnd);
        $rootEl.off("touchcancle", touchEnd);
        moving = false;
        if (null === event) {
            return;
        }
        var translatedLeft = $currentEl.data("translatedLeft"),
            fixElWidth = $fixEl.width(),
            translated,
            halfFixElWidth = fixElWidth / 2;
        if ($currentEl.data("isShow")) {
            translatedLeft = -fixElWidth;
            openSwipeEl = $currentEl;
        } else {
            translatedLeft = 0;
            openSwipeEl = null;
        }
        $currentEl.data("translatedLeft", translatedLeft);
        translated = translatedLeft ? "translate3d(" + translatedLeft + "px,0,0)" : "";

        $currentEl.css({
            "-webkit-transform": translated,
            transform: translated
        });

        $callback();
        $currentEl.addClass('anim');
    }

    function touchStart(event,callback) {

        var touches = event.touches;
        $currentEl = $(event.currentTarget);
        $callback = function(){
            callback($currentEl);
        };
        $fixEl = $currentEl.children("*[data-swipe-item-fixel]");
        if (touches.length > 1) {
            return;
        }
        startPoint = {
            x: touches[0].clientX,
            y: touches[0].clientY
        };

        $currentEl.removeClass('anim');

        $rootEl.on("touchmove", touchMove);
        $rootEl.on("touchend", touchEnd);
        $rootEl.on("touchcancle", touchEnd);

    }

    $.fn.swipeMenu = function (callback) {
        var $el = $(this);
        $el.delegate("*[data-swipe-item]", "touchstart", (function(){
            return function(event){
                touchStart.apply($el, [event, callback]);
            }
        })());
    };

    function hideSwipe() {
        var translated = "";
        //openSwipeEl = $("*[data-swipe-item]");
        if (openSwipeEl) {
            openSwipeEl
                .css({
                    "-webkit-transform": translated,
                    transform: translated
                })
                .data("isShow", 0)
                .data("translatedLeft", 0);

            openSwipeEl = null;
        }
    }
    $(document).delegate('body', 'touchstart', function () {
        hideSwipe();
    });
    

}(window, document, Zepto));