登录
当前位置： 首页 > 编程笔记 >

基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解

东门晨
2023-03-14
本文向大家介绍基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解，包括了基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解的使用技巧和注意事项，需要的朋友参考一下

调用方式 :ImageView(index,imgData)  --index参数 为图片默认显示的索引值，类型 为Number  --imaData参数 为图片url数组 ，类型为Array

使用之前要先引入 zepto.js 文件

ImageView.js具体代码如下：


/*

 * ImageView v1.0.0

 * --基于zepto.js的大图查看

 * --调用方法 ImageView(index,imgDada)

 * --index 图片默认值显示索引,Number  --imgData 图片url数组,Array

 * */

var ImageView=(function(window,$){

    var _this=$("#slideView"),_ImgData=[],_index=0,_length=0,

        _start=[],_org=[],_orgTime=null,

        _lastTapDate=null,

        _zoom=1,_zoomXY=[0,0],_transX=null,

        _advancedSupport = false,

        _doubleDistOrg=1,_doubleZoomOrg=1,isDoubleZoom = false,

        isSlide=true,isDrag=false,timer=null,

        winW=window.innerWidth,winH=window.innerHeight;

    /**

     * 事件对象 event

     */

    var Event={

        touchstart:function(e){

            e.preventDefault();

            if (_advancedSupport && e.touches && e.touches.length >= 2) {

                var img = getImg();

                $(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"});

                _doubleZoomOrg = _zoom;

                _doubleDistOrg = getDist(e.touches[0].pageX, e.touches[0].pageY, e.touches[1].pageX, e.touches[1].pageY);

                isDoubleZoom = true;

                return

            }

            e = e.touches ? e.touches[0] : e;

            isDoubleZoom = false;

            _start = [e.pageX, e.pageY];

            _org = [e.pageX, e.pageY];

            _orgTime = Date.now();

            _transX = -_index * winW;

            if(_zoom!=1){

                _zoomXY = _zoomXY || [0, 0];

                _orgZoomXY = [_zoomXY[0], _zoomXY[1]];

                var img = getImg();

                img&&($(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"}));

                isDrag = true

            }else{

                _this.find(".pv-inner").css({"-webkit-transitionDuration":"0ms","transitionDuration":"0ms"});

                isSlide = true

            }

        },

        touchmove:function(e){

            e.preventDefault();

            if (_advancedSupport && e.touches && e.touches.length >= 2) {

                var newDist = getDist(e.touches[0].pageX, e.touches[0].pageY, e.touches[1].pageX, e.touches[1].pageY);

                _zoom = (newDist/_doubleDistOrg) * _doubleZoomOrg

                var img = getImg();

                $(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"});

                if (_zoom < 1) {

                    _zoom = 1;

                    _zoomXY = [0, 0];

                    $(img).css({"-webkit-transitionDuration": "200ms","transitionDuration": "200ms"})

                } else if (_zoom >getScale(img) * 2){

                     _zoom = getScale(img) * 2;

                }

                $(img).css({"-webkit-transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)"});

                return

            }

            if (isDoubleZoom){

                return;

            }

            e = e.touches ? e.touches[0] : e;

            if (_zoom != 1) {

                var deltaX = (e.pageX - _start[0]) / _zoom;

                var deltaY = (e.pageY - _start[1]) / _zoom;

                _start = [e.pageX, e.pageY];

                var img = getImg();

                var newWidth = img.clientWidth *_zoom,

                    newHeight = img.clientHeight * _zoom;

                var borderX = (newWidth - winW) / 2 / _zoom,

                    borderY = (newHeight - winH) / 2 / _zoom;

                (borderX >= 0)&&(_zoomXY[0] < -borderX || _zoomXY[0] > borderX)&&(deltaX /= 3);

                (borderY > 0)&&(_zoomXY[1] < -borderY || _zoomXY[1] > borderY)&&(deltaY /= 3);

                _zoomXY[0] += deltaX;

                _zoomXY[1] += deltaY;

                (_length == 1 && newWidth < winW||newWidth < winW)&&(_zoomXY[0] = 0);

                (_length == 1 && newHeight < winH||newHeight < winH)&&(_zoomXY[1] = 0);

                $(img).css({"-webkit-transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] +

                    "px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] +

                    "px," + _zoomXY[1] + "px)"})

            }else{

                if (!isSlide) return;

                var deltaX = e.pageX - _start[0];

                (_transX > 0 || _transX < -winW * (_length - 1))&&(deltaX /= 4);

                _transX = -_index * winW + deltaX;

                _this.find(".pv-inner").css({"-webkit-transform":"translate(" + _transX + "px,0px) translateZ(0)"});

            }

        },

        touchend:function(e){

            if (isDoubleZoom) {

                return;

            }

            if (_zoom != 1) {

                if (!isDrag){return;}

                var img = getImg();

                var newWidth = img.clientWidth *_zoom,

                    newHeight = img.clientHeight * _zoom;

                var borderX = (newWidth - winW) / 2 / _zoom,

                    borderY = (newHeight - winH) / 2 / _zoom;

                if (_length > 1 && borderX >= 0) {

                    var updateDelta = 0;

                    var switchDelta = winW / 6;

                    if (_zoomXY[0] < -borderX - switchDelta / _zoom && _index < _length - 1){

                        updateDelta = 1;

                    }else if (_zoomXY[0] > borderX + switchDelta / _zoom && _index > 0){

                        updateDelta = -1;

                    }

                    if (updateDelta != 0) {

                        scaleDown(img);

                        changeIndex(_index + updateDelta);

                        return

                    }

                }

                var delta = Date.now() - _orgTime;

                if (delta < 300) {

                    (delta <= 10)&&(delta = 10);

                    var deltaDis = Math.pow(180 / delta, 2);

                    _zoomXY[0] += (_zoomXY[0] - _orgZoomXY[0]) * deltaDis;

                    _zoomXY[1] += (_zoomXY[1] - _orgZoomXY[1]) * deltaDis;

                    $(img).css({"-webkit-transition": "400ms cubic-bezier(0.08,0.65,0.79,1)","transition": "400ms cubic-bezier(0.08,0.65,0.79,1)"})

                } else{

                    $(img).css({"-webkit-transition": "200ms linear","transition": "200ms linear"});

                }

                if (borderX >= 0){

                    if (_zoomXY[0] < -borderX){

                        _zoomXY[0] = -borderX;

                    }else if (_zoomXY[0] > borderX){

                        _zoomXY[0] = borderX;

                    }

                }

                if (borderY > 0){

                    if (_zoomXY[1] < -borderY){

                        _zoomXY[1] = -borderY;

                    }else if (_zoomXY[1] >borderY){

                        _zoomXY[1] = borderY;

                    }

                }

                if (Math.abs(_zoomXY[0]) < 10) {

                    $(img).css({"-webkit-transform": "scale(" + _zoom + ") translate(0px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(0px," + _zoomXY[1] + "px)"});

                    return

                } else{

                    $(img).css({"-webkit-transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)"});

                }

                isDrag = false

            }else{

                if (!isSlide){ return;}

                var deltaX = _transX - -_index * winW;

                var updateDelta = 0;

                if (deltaX > 50){

                    updateDelta = -1;

                }else if(deltaX < -50){

                    updateDelta = 1;

                }

                _index=_index+updateDelta;

                changeIndex(_index);

                isSlide =false

            }

        },

        click:function(e){

            _zoom=1;

            _zoomXY=[0,0];

            _this.css("opacity","0");

            timer=setTimeout(function(){

                _this.css({"display":""}).html("");

                unbind();

            },150)

        },

        dobelTap:function(e){

            clearTimeout(timer);

            var now = new Date;

            if (now - _lastTapDate < 500){

                return;

            }

            _lastTapDate = now;

            var img = getImg();

            if (!img){

                return;

            }

            if (_zoom != 1){

                scaleDown(img);

            }else{

                scaleUp(img);

            }

        },

        setView:function(e){

            winW=window.innerWidth;

            winH=window.innerHeight;

            _this.width(window.innerWidth).height(window.innerHeight);

            translate((-_index*window.innerWidth),0,0,$(".pv-inner")[0]);

            scaleDown(getImg())

        }

    };

    var handleEvent=function(e){

        switch (e.type){

            case "touchstart":

                Event.touchstart(e);

                break;

            case "touchmove":

                Event.touchmove(e);

                break;

            case "touchcancel":

            case "touchend":

                Event.touchend(e);

                break;

            case "orientationchange":

            case "resize":

                Event.setView(e);

                break

        }

    };

    /**

     * 绑定事件

     */

    var bind=function(){

        _this.on("singleTap",function(e){

            e.preventDefault();

            var now = new Date;

            if (now - _lastTapDate < 500){

                return;            

            }

            _lastTapDate = now;

            Event.click(e);

            return false;

        }).on("doubleTap", function(e) {

            e.preventDefault();

            Event.dobelTap(e);

            return false;

        });

        _this.on("touchstart touchmove touchend touchcancel", function(e) {

            handleEvent(e);

        });

        Event.setView();

        "onorientationchange" in window ? window.addEventListener("orientationchange",Event.setView,false) : window.addEventListener("resize",Event.setView,false);

    };

    /**

     * 解除事件

     */

    var unbind= function() {

         _this.off();

        "onorientationchange" in window ? window.removeEventListener("orientationchange",Event.setView, false) : window.removeEventListener("resize",Event.setView, false)

    };

    var getDist= function(x1, y1, x2, y2) {

        return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2), 2)

    }

    /**

     * 图片缩放

     */

    var getScale=function(img) {

        var h = img.naturalHeight, w = img.naturalWidth,

        Scale=w*h/(img.clientHeight*img.clientWidth);

        return Scale;

    };

    var scaleUp=function(img) {

        var scale = getScale(img);

        if (scale > 1)

            $(img).css({"-webkit-transform": "scale(" + scale + ")","transform": "scale(" + scale + ")","-webkit-transition": "200ms","transition": "200ms"});

        _zoom = scale;

    };

    var scaleDown=function(img) {

        _zoom = 1;

        _zoomXY = [0, 0];

        _doubleDistOrg = 1;

        _doubleZoomOrg = 1;

        $(img).css({"-webkit-transform": "scale(1)","transform": "scale(1)","-webkit-transition": "200ms","transition": "200ms"});

    };

    /**

     * 滑动效果

     * dist

     */

    var translate = function( distX,distY,speed,ele) {

        if( !!ele ){ ele=ele.style; }else{ return; }

        ele.webkitTransitionDuration =  ele.MozTransitionDuration = ele.msTransitionDuration = ele.OTransitionDuration = ele.transitionDuration =  speed + 'ms';

        ele.webkitTransform = 'translate(' + distX + 'px,'+distY+'px)' + 'translateZ(0)';

        ele.msTransform = ele.MozTransform = ele.OTransform = 'translateX(' + distX + 'px) translateY(' + distY + 'px)';

    };

    /**

     * 更改索引值 _index

     */

    var changeIndex=function(index,force){

        if (index < 0){

            index = 0;

        }else if(index >= _length){

            index =_length - 1;

        }

        _index = index;

        translate((-_index*window.innerWidth),0,force? "0" : "200" ,$(".pv-inner")[0]);

        $("#J_index").html(_index+1+"/"+_length);

        imgLoad();

    }

    /**

     * 图片获取

     */

    var getImg=function(index) {

        var img = _this.find("li").eq(index || _index).find("img");

        if (img.size() == 1){

            return img[0];

        }else{

            return null

        }

    }

    /**

     * 图片加载

     */

    var imgLoad=function(){

        if($(".pv-img").eq(_index).find("img")[0]){

            $("#J_loading").css("display","");

            return;

        }else{

            $("#J_loading").css("display","block");

            var tempImg=new Image(),w,h,set;

            tempImg.src=_ImgData[_index];

            $(".pv-img").eq(_index)[0].appendChild(tempImg);

            tempImg.onload=function(){

                $("#J_loading").css("display","");

            }

        }

    };

    /**

     * 创建大图查看Dome结构

     */

    var Create=function(){

        _this.append("<ul class='pv-inner'></ul>").append("<p class='counts'><span class='value' id='J_index'>"+(_index+1)+"/"+_length+"</span></p>").append("<span class='ui-loading' id='J_loading' ><i class='t1'></i><i class='t2'></i><i class='t3'></i></span>")

        for(var i=0;i<_length;i++){

            $(".pv-inner").append("<li class='pv-img'></li>")

        }

        imgLoad();

    };

    /**

     * 大图查看初始化

     */

    var init=function(){

        !!_this[0]||$("body").append("<div class='slide-view' id='slideView'></div>");

        _this=$("#slideView");

        ($.os.iphone || $.os.android && parseFloat($.os.version) >= 4)&&(_advancedSupport = true);

    }();

    /**

     * 大图查看返回接口函数

     * ImageView(index,data)

     * index 初始索引值 nubmer

     * data 图片数组 array

     */

    var ImageView=function(index,data){

        _ImgData=data;

        _index=index;

        _length=data.length;

        //创建dom结构

        Create();

        //dom结构显示

        _this.css("display","block");

        //绑定事件

        bind();

    }

    return ImageView;

})(window,Zepto);
　　

ImageView.js用到的css代码如下：


/*大图查看*/

.slide-view {background: #000;position: fixed;width: 100%;height: 100%;overflow: hidden;top: 0;left: 0;z-index: 100;opacity:0;display: none;-webkit-animation:fadeIn .2s linear forwards;animation:fadeIn .2s linear forwards;-webkit-touch-callout: none;-webkit-transform-style: preserve-3d; }

.slide-view .counts {position: absolute;top: 5%;left: 0;right: 0;text-align: center;font-size: 0;-webkit-transform-style: preserve-3d; }

.slide-view .counts .value {border-radius: 9px;line-height: 18px;padding: 0 6px;font-size: 11px;display: inline-block;background-color: rgba(102,102,102,.6);color: #f1f1f1;}

.pv-inner {position: relative;z-index: -1;display: -webkit-box;display: box;width: 100%;height: 100%;-webkit-transition: all 350ms linear;-webkit-backface-visibility: hidden;transition: all 350ms linear;backface-visibility: hidden;-webkit-touch-callout: none;-webkit-transform-style: preserve-3d; }

.pv-inner li {text-align: center;display: -webkit-box;display: box;-webkit-box-align: center;overflow: hidden;width: 100%;height: 100%;-webkit-touch-callout: none;backface-visibility: hidden;-webkit-transform-style: preserve-3d; }

.pv-inner img {max-width: 97%;max-height: 100%;-webkit-transform: scale(1) translate(0px,0px);transform: scale(1) translate(0px,0px);visibility: visible;-webkit-transition: 200ms;transition: 200ms;-webkit-user-select: none;user-select: none;display: block;margin: 0 auto;backface-visibility: hidden;-webkit-transform-style: preserve-3d; }

@-webkit-keyframes fadeIn{

    0%{opacity:0;}

    100%{opacity:1;}

}

@keyframes fadeIn{

    0%{opacity:0;}

    100%{opacity:100%;}

}

/*--------------------loading-----------------------*/

.ui-loading {position: absolute;left: 50%;top: 50%;display: none;vertical-align: middle;font: 0/0 arial;margin: -5px 0 0 -10px;}

.ui-loading i {display: inline-block;width: 5px;height: 12px;background: #fff;vertical-align: top;-webkit-animation: loading-spin 1s infinite linear;animation: loading-spin 1s infinite linear;}

.ui-loading i {-webkit-animation: loading-spin 1s infinite linear;animation: loading-spin 1s infinite linear}

.ui-loading i.t2 {margin: 0 3px;-webkit-animation-name: loading-spin-one;animation-name: loading-spin-one}

.ui-loading i.t3 {-webkit-animation-name: loading-spin-two;animation-name: loading-spin-two}

@-webkit-keyframes loading-spin {

    0% {opacity: 0}

    30% {opacity: 1;-webkit-transform: scale(1,1.2)}

    60% {opacity: 0;-webkit-transform: scale(1)}

    100% {opacity: 0}

}

@-webkit-keyframes loading-spin-one {

    0% {opacity: 0}

    20% {opacity: 0}

    50% {opacity: 1;-webkit-transform: scale(1,1.2)}

    80% {opacity: 0;-webkit-transform: scale(1)}

    100% {opacity: 0}

}

@-webkit-keyframes loading-spin-two {

    0% {opacity: 0}

    40% {opacity: 0}

    70% {opacity: 1;-webkit-transform: scale(1,1.2)}

    100% {opacity: 0;-webkit-transform: scale(1)}

}

@keyframes loading-spin {

    0% {opacity: 0}

    30% {opacity: 1;transform: scale(1,1.2)}

    60% {opacity: 0;transform: scale(1)}

    100% {opacity: 0}

}

@keyframes loading-spin-one {

    0% {opacity: 0}

    20% {opacity: 0}

    50% {opacity: 1;transform: scale(1,1.2)}

    80% {opacity: 0;transform: scale(1)}

    100% {opacity: 0}

}

@keyframes loading-spin-two {

    0% {opacity: 0}

    40% {opacity: 0}

    70% {opacity: 1;transform: scale(1,1.2)}

    100% {opacity: 0;transform: scale(1)}

}

/*--------------------loading-end----------------------*/

ps:代码功能比较简单，可能会存在诸多问题。但也能勉强使用了

下用是使用ImageView.js的一个例子：


<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

        <title>移动端大图查看</title>

        <script type="text/javascript" src="test_files/zepto.min.js" ></script>

        <script type="text/javascript" src="test_files/ImageView.js" ></script>

    </head>

    <body>

        <!--以上为HTML页面结构 -->

        <!--以下为ImageView使用例子 -->

        <script>

            ;(function(){

                //获取 html 中的图片元素

                var aImg=document.querySelectorAll("img"),

                    aImgSrc=[];

                //为图片绑定单击事件

                for(var i=0,l=aImg.length;i&lt;l;i++){

                    aImg[i].index=i;

                    aImg[i].className+=" conPic";

                    aImgSrc.push(aImg[i].src);

                }

                for(var i=0;i<$(".conPic").length;i++){

                    if($(".conPic")[i].complete){

                        addTap($(".conPic")[i])

                    }else{

                        $(".conPic")[i].onload=function(){

                            addTap(this);

                        }

                    }

                }

                function addTap(obj){

                    $(obj).on("tap",function(){

                        //调用ImageView

                        ImageView($(obj)[0].index,aImgSrc);

                    })

                }

            })();

        </script>

    </body>

以上就是本文的全部内容了，希望大家能够喜欢

 类似资料：
  • 基于zepto.js实现手机相册功能

    本文向大家介绍基于zepto.js实现手机相册功能，包括了基于zepto.js实现手机相册功能的使用技巧和注意事项，需要的朋友参考一下 看完老师的视频做的一个手机相册，对我这种菜鸟来说还是直接上代码吧！里面用到17张小图，17张大图，还有animate.css和zepto.min.js ,都可以在网上找到。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

  • 基于zepto.js简单实现上传图片

    本文向大家介绍基于zepto.js简单实现上传图片，包括了基于zepto.js简单实现上传图片的使用技巧和注意事项，需要的朋友参考一下 效果如下： html:  js:  以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

  • 基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

    本文向大家介绍基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )，包括了基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )的使用技巧和注意事项，需要的朋友参考一下 概述 使用Vue2进行的仿手机QQ的webapp的制作，在ui上，参考了设计师kaokao的作品，作品由个人独立开发，源码中进行了详细的注释。 由于自己也是初学Vue2，所以注释写的不够精简，请见谅。 项目地址

  • 高仿iPad版QQ空间

    界面效果高度模仿了官方iPad版QQ空间，支持横屏和竖屏自动布局。唯一不足是里面没有填充内容。希望作者能够进一步完善。 [Code4App.com]

  • 省市选择的简单实现(基于zepto.js)

    本文向大家介绍省市选择的简单实现(基于zepto.js)，包括了省市选择的简单实现(基于zepto.js)的使用技巧和注意事项，需要的朋友参考一下 效果如下： 以上就是小编为大家带来的省市选择的简单实现(基于zepto.js)的全部内容了，希望大家多多支持呐喊教程~

  • 高仿手机QQ登陆界面

    手机QQ的账号选择功能一直与众不同别具一格，通过一个下箭头拉开在原有的账号密码中间展开一个账号盒子，盒子中有已经登陆过的账号头像，选择一个头像即可快速切换。今天为大家再来基本上重现这一功能的demo。 功能点： -初始状态默认有2已登录的QQ账号，您可以直接下拉看到这2个账号，点击头像即可填入到2个文本框内。 -账号盒子被打开的时候，头像 和账号密码等会变成半透明 -如果您另行输入一个新的QQ号，

相关阅读

手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现基于cssSlidy.js插件实现响应式手机图片轮播效果基于jQuery实现表格的查看修改删除基于JavaScript实现仿京东图片轮播效果android基于SwipeRefreshLayout实现类QQ的侧滑删除

相关文章

Linux查看文件系统详细信息（dumpe2fs命令）Linux查看开机信息（dmesg命令）九大组件利用Spring事件机制初始化消息中间件 RabbitMQ 之 交换机类型及其详解GWT 基础组件

相关问答

如何实现大于或小于 FastAPI 的查询参数mysql - R-tree原理详解：空间索引的高效实现?Hibernate空间：用于检索几何图形的 sql 查询基于航空图像的地面机器人障碍物检测基于FIFO的队列实现？

相关工具

高仿iPad版QQ空间高仿手机QQ登陆界面模仿看图猜成语仿QQ聊天布局Zepto.js

相关文档

手机 QQ 通用 API 文档基于 Node.js 的 HTTPS MITM 中间人代理的原理和实现机器学习实战：基于 Scikit-Learn 和 TensorFlowGRUB2 配置文件 grub.cfg 详解 / GRUB2 实战手册Windows 事件查看器
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.