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

来源：互联网发布：人工智能图片大全编辑：程序博客网时间：2024/06/07 00:32
/** * 基于移动端的图片浏览器 * @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);    },};
阅读全文
0 0