移动端图片点击放大缩小（例如商品详情时）插件

其他 2018-04-20 08:58:12 阅读次数: 3

使用：

        showImagesFn.init({
            "btnName" : "imgs_ul",
            "end" : function(index,wrapper){
                wrapper.siblings(".img_percent").find("span").eq(0).html(index + 1);
                var width = wrapper.find("li").width();
                wrapper.find("ul").css("margin-left" , - index * width).attr("data-index" , index);
            }
        });
<ul class="imgs_ul clearfix">
                                                <volist name="appraiseData_best_list['appraisesAnnex']" id="vull">
                                                    <li><img src="{$vull}"><span>{$appraiseData_best_list['appraisesImg_count']}张</span></li>
                                                </volist>

                                            </ul>

代码：

/**
 * 
 * @authors lwd ([email protected])
 * @date    2018-02-01 16:39:05
 * @version v.1.0.1
 * @params     {
                "btnName" : "imgs_ul",    //包含li->img标签的父元素，可以是id或者class
                "scaleSmall" : 1,        //手机，手动缩放图片的最小缩小倍数,默认1
                "scaleBig" : 4            //手机，手动缩放图片的最大放大倍数,默认4
            }
 */

var showImagesFn = {
    "init" : function(json){
        this.btnName = json.btnName;
        this.scaleBig = json.scaleBig || 4;//最大放大倍数
        this.scaleSmall = json.scaleSmall || 1;//最小缩小倍数
        this.end = json.end || function(){};
        this.winWidth = $(window).width();
        this.winHeight = $(window).height();
        this.imgWrapWidth = $(window).width() > 640 ? 640 : $(window).width();
        this.index = 0;
        this.scaleArray = [];
        this.touchMethod = 0;
        this.showImagesContainer();
        return this;
    },
    "getUrls" : function(child){
        var lis = $(child).parent().find("li");
        var scope = this;
        lis.each(function(){
            var img = $(this).find("img");
            if (img.parent().hasClass("MIDIV")) {
                var url = img.parent().attr("data-src");
            }else{
                var url = $(this).find("img").attr("src");
            }
            scope.urls.push(url);
        });
        this.length = this.urls.length;
    },
    "setHtml" : function(){
        var section = $('<section style="position: fixed; width: 100%; height: 100%;bottom: -100%; z-index: 1001; left: 0;"></section>');
        this.section = section;
        this.cover = $('<div class="showImages_cover" style="position: fixed; width: 100%; height: 100%; z-index: 1000; background-color: #000; top: 0;"></div>');
        this.container = $('<div class="showImagesCotainer" style="position: absolute; top: -100%; height:100%; width: 100%; left: 0; z-index: 1001;"></div>');
        var head = $('<div class="showImagesHead" style="height: 44px; line-height: 44px; text-align: center; font-size: 14px; color: #fff; position: relative; z-index: 3;"></div>');
        this.nowIndex = $('<span class="showImagesNowIndex" style="margin-right: 3px;">1</span>');
        this.totalImgs = $('<span class="showImagesTotalImgs" style="margin-left: 3px;"></span>');
        this.totalImgs.html(this.length);
        head.append(this.nowIndex);
        head.append("/");
        head.append(this.totalImgs);
        this.container.append(head);
        this.body = $('<div class="showImagesBody" style="position: absolute; z-index: 2; top: 0; bottom: 0; width: 100%;overflow:hidden;"></div>');
        var ul = $('<ul class="showImagesUl" style="position:absolute;height:100%;left:0;top:0;"></ul>');
        ul.css({
            "width" : this.winWidth * this.length
        });
        this.ul = ul;
        var prop = this.imgWrapWidth / this.winHeight;
        var scope = this;
        scope.loadImg(0);
        this.body.append(ul);
        this.container.append(this.body);
        section.append(this.cover);
        section.append(this.container);
        this.shutDown = $('<div class="showImagesShutDown"></div>');
        this.shutDown.css({
            "width": "30%",
            "height": "44px",
            "position": "absolute",
            "z-index": "1002",
            "left": "0",
            "top": "-100%"
        });
        var span = $('<span></span>')
        span.css({
            "display": "block",
            "width": "14px",
            "height": "14px",
            "border-left": "1px solid #fff",
            "border-top": "1px solid #fff",
            "transform": "rotate(-45deg)",
            "position": "absolute",
            "left": "14px",
            "top": "14px"
        });
        this.shutDown.append(span);
        section.append(this.shutDown);
        $(document.body).append(section);
        var scope = this;
        this.ul.on("touchstart",function(e){
            scope.slideTouchStart(e,scope);
        });
        this.ul.on("touchmove",function(e){
            scope.slideTouchMove(e,scope);
        });
        this.ul.on("touchend",function(e){
            scope.slideTouchEnd(e,scope);
        });
        this.ul.on("mousedown",function(e){
            scope.mouseDown(e,scope);
        });
        this.ul.on("mousemove",function(e){
            scope.mouseMove(e,scope);
        });
        this.ul.on("mouseup",function(e){
            var e = e || window.event;
            scope.mouseUp(e,scope);
            var upX = e.clientX;
            var upY = e.clientY;
            if (Math.abs(upX - scope.mouseX) < 1 && Math.abs(upY - scope.mouseY) < 1) {
                scope.hideContainer();
            }
        });
    },
    "loadImg" : function(i){
        var scope = this;
        var img = new Image();
        img.src = scope.urls[i];
        img.onerror = function(){
            if (WST) {
                var bakSrc = WST.ROOT + "/Public/wap/images/loadFail.png";
            }else{
                var bakSrc = "/Public/wap/images/loadFail.png";
            }
            scope.setLi(this,scope,bakSrc);
            if (i < scope.length - 1) {
                scope.loadImg(i + 1);
            }
        }
        img.onload = function(){
            scope.setLi(this,scope);
            if (i < scope.length - 1) {
                scope.loadImg(i + 1);
            }
        }
    },
    "setLi" : function(thisImg,scope,src){
        var width = thisImg.naturalWidth;
        var height = thisImg.naturalHeight;
        var li = $('<li style="float:left;"></li>');
        li.css({
            "width" : scope.winWidth,
            "height" : scope.winHeight,
            "position" : "relative",
            "display" : "-webkit-box",
            "vertical-align" : "middle",
            "-webkit-box-pack" : "center",
            "-webkit-box-align" : "center"
            // ,"-webkit-transform" : "scale(2)"
        });
        var imgElement = $("<img />");
        src = src || thisImg.src;
        imgElement.attr({"src" : src}).css({
            "max-width" : "100%",
            "max-height" : "100%",
            "display" : "block",
            "overflow": "hidden"
        });
        li.append(imgElement);
        scope.ul.append(li);
        scope.scaleArray.push(1);
    },
    "winResize" : function(){
        var scope = this;
        $(window).resize(function(){
            scope.winWidth = $(window).width();
            scope.winHeight = $(window).height();
            scope.imgWrapWidth = $(window).width() > 640 ? 640 : $(window).width();
            scope.ul.css({
                "width" : scope.winWidth * scope.length,
                "height" : scope.winHeight,
                "left" : -scope.winWidth * scope.index
            });
            scope.ul.find("li").css({
                "width" : scope.winWidth,
                "height" : scope.winHeight
            });
        });
    },
    "showImagesContainer" : function(){
        var scope = this;
        var btn = $("#" + this.btnName).length > 0 ? "#" + this.btnName : "." + this.btnName;
        var mouseMoveHappen = false;
        $(document).on("mousemove",function(){
            mouseMoveHappen = true;
        });
        $(document).on("mousedown",function(){
            mouseMoveHappen = false;
        });
        $(document).on("click",btn + " li",function(){
            scope.btnBom = $(this).closest(btn);
            if (!mouseMoveHappen) {
                scope.urls = [];
                scope.getUrls(this);
                scope.index = $(this).index();
                var scrollTop = $(window).scrollTop();
                var left = ($(window).width() - $(document.body).width()) / 2;
                $(document.body).css({"position":"fixed","top":"-" + scrollTop + "px","left" : left});
                scope.setHtml();
                scope.hideImagesContainer();
                scope.ul.css({
                    "left" : -scope.winWidth * scope.index
                });
                scope.nowIndex.html(scope.index + 1);
                scope.winResize();
            }
        });
    },
    "hideImagesContainer" : function(){
        var scope = this;
        this.shutDown.click(function(){
            scope.hideContainer();
        });
    },
    "hideContainer" : function(){
        var top = -parseFloat($(document.body).offset().top);
        $(document.body).css({"position":"initial"});
        $(window).scrollTop(top);
        for (var i = 0; i < this.length; i++) {
            this.scaleArray[i] = 1;
        }
        this.section.remove();
        this.end && this.end(this.index,this.btnBom);
    },
    "slideTouchStart" : function(e,scope){
        var touch = e.originalEvent.changedTouches[0];
        scope.startX = touch.clientX;
        scope.startY = touch.clientY;
        scope.ulLeft = parseFloat(scope.ul.css("left"));
        scope.ulTop = parseFloat(scope.ul.css("top"));
        scope.touchMethod = 1;
        try {
            scope.dis = [];
        }catch (e) {
            alert('touchSatrtFunc：' + e.message);
        }
    },
    "mouseDown" : function(e,scope){
        var e = e || window.event;
        scope.mouseX = e.clientX;
        scope.mouseY = e.clientY;
        scope.ulLeft = parseFloat(scope.ul.css("left"));
        scope.ulTop = parseFloat(scope.ul.css("top"));
        scope.mouseStart = 1;
    },
    "mouseMove" : function(e,scope){
        var e = e || window.event;
        e.preventDefault();
        if (scope.mouseStart === 1) {
            scope.mX = e.clientX;
            scope.mY = e.clientY;
            var dx = scope.mX - scope.mouseX;
            var dy = scope.mY - scope.mouseY;
            var left;
            //过度距离
            var boundDis = 10;
            //超越距离
            var switchDis = 30;
            left = scope.ulLeft + dx;
            scope.ul.css({
                "left" : left
            });
        }
    },
    "slideTouchMove" : function(e,scope){
        e.preventDefault();
        var evt = e.originalEvent;
        var touch = evt.touches[0];
        if (evt.touches.length === 1 && scope.touchMethod === 1) {
            scope.dX = touch.clientX;
            scope.dY = touch.clientY;
            var dx = scope.dX - scope.startX;
            var dy = scope.dY - scope.startY;
            var boundLeft = scope.winWidth * (scope.scaleArray[scope.index] - 1) / 2 - scope.winWidth * scope.index;
            var boundRight = -scope.winWidth * (scope.scaleArray[scope.index] - 1) / 2 - scope.winWidth * scope.index;
            var boundTop = scope.winHeight * (scope.scaleArray[scope.index] - 1) / 2;
            var left,top;
            //过度距离
            var boundDis = 10;
            //超越距离
            var switchDis = 30;
            if (scope.scaleArray[scope.index] > 1) {
                if (scope.ulTop + dy >= boundTop + boundDis ) {
                    top = boundTop + boundDis;
                }else if(scope.ulTop + dy <= -boundTop - boundDis){
                    top = -boundTop - boundDis;
                }else{
                    top = scope.ulTop + dy;
                }
                if (scope.ulLeft + dx >= boundLeft + boundDis) {
                    //放大时向右滑
                    var bdx = scope.ulLeft + dx - ((boundLeft + boundDis));
                    left = boundLeft + boundDis + bdx / 10;
                    if (left > boundLeft + switchDis) {
                        scope.scaleArray[scope.index] = 1;
                        top = 0;
                        if (scope.index > 0) {
                            scope.ul.find("li").eq(scope.index - 1).css({
                                "z-index" : 1
                            }).siblings().css({
                                "webkitTransform" : 'scale(1)',
                                "z-index" : 0
                            });
                        }
                    }
                }else if(scope.ulLeft + dx <= boundRight - boundDis){
                    //放大时向左滑
                    var bdx = scope.ulLeft + dx - (boundRight - boundDis);
                    left = boundRight - boundDis + bdx / 10;
                    if (left < boundRight - switchDis) {
                        scope.scaleArray[scope.index] = 1;
                        top = 0;
                        if (scope.index < scope.length - 1) {
                            scope.ul.find("li").eq(scope.index + 1).css({
                                "z-index" : 1
                            }).siblings().css({
                                "webkitTransform" : 'scale(1)',
                                "z-index" : 0
                            });
                        }
                    }
                }else{
                    left = scope.ulLeft + dx;
                }
                scope.ul.css({
                    "top" : top
                });
                scope.ul.css({
                    "left" : left
                });
            }else{
                left = scope.ulLeft + dx;
                scope.ul.css({
                    "left" : left
                });
            }
        }else if(evt.touches.length === 2){
            scope.touchMethod = 2;
            try {
                var x = Number(touch.clientX); //页面触点X坐标
                var y = Number(touch.clientY); //页面触点Y坐标
                if (evt.targetTouches.length == 2) {
                    var touch1 = evt.targetTouches[1]; //获取第2个触点
                    var x1 = Number(touch1.clientX); //页面触点X坐标
                    var y1 = Number(touch1.clientY); //页面触点Y坐标
                    scope.dis.push(Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2)));
                    if (scope.dis.length > 1) {
                        scope.scaleArray[scope.index] -= 0.05 * (scope.dis[scope.dis.length - 2] - scope.dis[scope.dis.length - 1]);
                        if (scope.scaleArray[scope.index] < scope.scaleSmall) {
                            scope.scaleArray[scope.index] = scope.scaleSmall;
                        }
                        if(scope.scaleArray[scope.index] > scope.scaleBig){
                            scope.scaleArray[scope.index] = scope.scaleBig;
                        }
                        scope.ul.find("li").eq(scope.index).css({
                            "webkitTransform" : 'scale(' + scope.scaleArray[scope.index] + ')',
                            "z-index": 1
                        }).siblings().css({
                            "z-index" : 0
                        });
                    }
                }
            }catch (e) {
              alert('touchMoveFunc：' + e.message);
            }
        }
    },
    "mouseUp" : function(e,scope){
        var e = e || window.event;
        var evt = e.originalEvent;
        scope.endX = e.clientX;
        var dx = scope.endX - scope.mouseX;
        if (Math.abs(dx) / scope.imgWrapWidth < 0.1) {
            scope.ul.stop().animate({
                "left" : -scope.winWidth * scope.index
            },200);
        }else{
            if (dx > 0) {
                if (scope.index === 0) {
                    scope.ul.stop().animate({
                        "left" : -scope.winWidth * scope.index
                    },200,moveEnd);
                }else{
                    scope.ul.stop().animate({
                        "left" : -scope.winWidth * (scope.index - 1)
                    },200,function(){
                        if (scope.index > 0) {
                            scope.index --;
                            scope.nowIndex.html(scope.index + 1);
                        }
                        moveEnd();
                    });
                }
            }else{
                if (scope.index === (scope.length - 1)) {
                    scope.ul.stop().animate({
                        "left" : -scope.winWidth * scope.index
                    },200,moveEnd);
                }else{
                    scope.ul.stop().animate({
                        "left" : -scope.winWidth * (scope.index + 1)
                    },200,function(){
                        if (scope.index < scope.length - 1) {
                            scope.index ++;
                            scope.nowIndex.html(scope.index + 1);
                            moveEnd();
                        }
                    });
                }
            }
        }
        scope.mouseStart = 0;
        function moveEnd(){
            scope.ul.find("li").eq(scope.index).css({
                "z-index" : 1
            }).siblings().css({
                "z-index" : 0
            });
        }
    },
    "slideTouchEnd" : function(e,scope){
        var evt = e.originalEvent;
        var touch = evt.changedTouches[0];
        if (scope.scaleArray[scope.index] > 1) {
            try {
                e.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动
            }catch (e) {
                alert('touchEndFunc：' + e.message);
            }
        }else{
            scope.endX = touch.clientX;
            var dx = scope.endX - scope.startX;
            if (Math.abs(dx) / scope.imgWrapWidth < 0.05) {
                scope.ul.stop().animate({
                    "left" : -scope.winWidth * scope.index,
                    "top" : 0
                },200);
            }else{
                if (dx > 0) {
                    if (scope.index === 0) {
                        scope.ul.stop().animate({
                            "left" : -scope.winWidth * scope.index
                        },200,moveEnd);
                    }else{
                        scope.ul.stop().animate({
                            "left" : -scope.winWidth * (scope.index - 1)
                        },200,function(){
                            if (scope.index > 0) {
                                scope.index --;
                                scope.nowIndex.html(scope.index + 1);
                            }
                            moveEnd();
                        });
                    }
                }else{
                    if (scope.index === (scope.length - 1)) {
                        scope.ul.stop().animate({
                            "left" : -scope.winWidth * scope.index
                        },200,moveEnd);
                    }else{
                        scope.ul.stop().animate({
                            "left" : -scope.winWidth * (scope.index + 1)
                        },200,function(){
                            if (scope.index < scope.length - 1) {
                                scope.index ++;
                                scope.nowIndex.html(scope.index + 1);
                                moveEnd();
                            }
                        });
                    }
                }
            }
        }
        function moveEnd(){
            for (var i = 0; i < scope.length; i++) {
                if (i !== scope.index) {
                    scope.scaleArray[i] = 1;
                }
                scope.ul.find("li").eq(i).css({
                    "webkitTransform" : 'scale(' + scope.scaleArray[i] + ')'
                });
            }
            scope.ul.find("li").eq(scope.index).css({
                "z-index" : 1
            }).siblings().css({
                "z-index" : 0
            });
        }
    }
};

猜你喜欢

转载自www.cnblogs.com/lst619247/p/8888074.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
周排行
购置笔记本常识
从源码看Spring Security之采坑笔记（Spring Boot篇）
大数据学习——高可用配置案例
如何避免选择不专业的建站公司?
Euclid's Game HDU - 1525（博弈）
面试笔记（六）---Js实现eventHandler
Windows 实例搭建的 FTP 在外网无法连接和访问
设计模式 : 桥接模式
USB 设备驱动开发之几个重要结构体分析
14-p14_sqrt求平方根
每日归档
更多
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022