自己写的一款基于移动端的图片浏览器插件

/**
 * 基于移动端的图片浏览器
 * @author:Arvon
 * @time:2017-06-02
 * @type {{}}
 */

var currIndex = 0;
var ImageBrowser = {
    $images:"",
    startX:0,
    moveX:0,
    releaseX:60,
    hasDblClicked:false,
    obj:document.getElementById("img_browser_cnt"),
    template:"",
    fillTmpl:function () {
        this.template = '<div id="img_browser" style="display: none;z-index: 99;position: absolute;left: 0;top: 0;background-color: black" >'+
            '<div id="img_browser_index" style="z-index: 100;position: fixed;left: 0;top: 0;margin: 10px  0 0 10px ">'+
            ' <a id="a_go_back">返回</a>'+
            ' <div style="float:right;margin-left: 20px;">'+
            ' <span id="currIndex" style="color:white;"></span><span id="totalIndex" style="color:white;"></span>'+
            ' </div>'+
            '</div>'+
            '<div id="img_browser_cnt" style="vertical-align: middle;background-color: black;" >'+
            ' </div>'+
            ' </div>';
    },
    init : function(){
        var me = this;
        me.fillTmpl();
        $("body").append(me.template);
        me.$images = $(".am-figure img");
        me.obj = document.getElementById("img_browser_cnt");
        $("#totalIndex").text(me.$images.length);
        me.$images.each(function (i,e) {
            $(e).click(function () {
                currIndex = me.$images.index(this) + 1 ;
                $("#currIndex").text(currIndex+"/");
                $("#img_browser_cnt").html("");
                $("#img_browser_cnt").append('<span></span><img src="'+this.src+'"/>');
                $("#img_browser_cnt").css("height",window.innerHeight);
                $("#img_browser").show();
                $(".new-cont").hide();
                $("#img_browser_cnt span").css({height:"100%",display:"inline-block","vertical-align":"middle"});
                var i = 0;
                $("#img_browser img").on('click', function () {
                    $(this).css({width:'100%',height:'auto'});
                    i++;
                    setTimeout(function () {
                        i = 0;
                    }, 500);
                    if(me.hasDblClicked){ //单击
                        me.hasDblClicked = false;
                        $(this).css({width:'100%',height:'auto'});
                        me.obj.addEventListener("touchstart",me.whenTouchStart,false);
                        me.obj.addEventListener("touchmove",me.whenTouchMove,false);
                    }
                    if (i > 1) { //双击
                        me.whenImageDblClick(this);
                    }
                })
            });
        });
        $("#img_browser_index #a_go_back").click(function () {
            $("#img_browser_cnt").html("");
            $("#img_browser").hide();
            $(".new-cont").show();
        });
        me.obj.addEventListener("touchstart", me.whenTouchStart,false);
        me.obj.addEventListener("touchmove",me.whenTouchMove,false);
        me.obj.addEventListener("touchend",me.whenTouchEnd,false);
    },
    whenTouchStart:function (event) {
        var touch = event.targetTouches[0];
        this.startX =  touch.pageX ;
        this.obj = document.getElementById("img_browser_cnt");
        this.obj.addEventListener('touchmove', this.whenTouchMove, false);
    },
    whenTouchMove:function (event) {
        // 如果这个元素的位置内只有一个手指的话
        if (event.targetTouches.length == 1) {
//            event.preventDefault(); // 阻止浏览器默认事件，重要
            var touch = event.targetTouches[0];
            this.moveX = touch.pageX - this.startX;
        }
    },
    whenTouchEnd:function (event) {
        var me = this;
        me.releaseX = 60;
        me.$images = $(".am-figure img");
        if(me.moveX<-me.releaseX){
            if(currIndex<=me.$images.length-1)
                currIndex ++;
            $("#img_browser_cnt img").attr("src",me.$images[currIndex-1].src).css({width:'100%',height:'auto'});
            $("#currIndex").text(currIndex+"/");
        }
        if(me.moveX > me.releaseX){
            if(currIndex>1)
                currIndex --;
            $("#img_browser_cnt img").attr("src",me.$images[currIndex-1].src).css({width:'100%',height:'auto'});
            $("#currIndex").text(currIndex+"/");
        }

        me.moveX = 0;
        me.obj.removeEventListener("touchstart",me.whenTouchStart,false);
//        obj.removeEventListener("touchmove",whenTouchMove,false);
    },
    whenImageDblClick:function (e) {
        var me = this;
        $(e).css("max-width","none");
        i = 0;
        me.hasDblClicked = true;
        var w = e.width;
        var h = e.height;
        $(e).css({width:w*1.5+'px',height:h*1.5+'px'});
        me.obj.removeEventListener("touchstart",me.whenTouchStart,false);
        me.obj.removeEventListener("touchmove",me.whenTouchMove,false);
    },
};