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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含19393字，纯文字阅读大概需要28分钟。

内容图文

基于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>
        
        
        <script>
            ;(function(){
                //获取 html 中的图片元素
                var aImg=document.querySelectorAll("img"),
                    aImgSrc=[];
                //为图片绑定单击事件
                for(var i=0,l=aImg.length;i<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实现仿手机QQ空间的大图查看组件ImageView.js详解全部内容，希望文章能够帮你解决基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/359003.html

来源：【匿名】

【上一篇】深入理解JavaScript系列（19）：求值策略(Evaluation strategy)详解【下一篇】javascript 怎么调用php方法

更多 ►

【基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解】教程文章相关的互联网学习教程文章

zepto是什么意思【图】

很多人都听说过zepto，但是很多人不知道zepto是什么意思？下面我们来总结一下zepto。一：zepto是什么意思zepto是一种高级浏览器js库，并且和jquery的api很相似，会使用jquery就一定会使用zepto，Zepto是一款开源软件，zepto的主要目的就是有一个通用库，并且下载速度快。二：zepto使用方法，我们可以使用script标签在页面的底部引用一个zepto文件，例如： </body><script src=./js/zepto.min.js></script></html>在移动端我们不需要...

zepto和jquery的区别有哪些【图】

zepto和jquery的区别有哪些？本篇文章就给大家介绍zepto是什么？zepto和jquery的区别，让大家对zepto有一个了解，知道zepto和jquery的区别是什么，希望对你们有所帮助。zepto是什么？Zepto是一个基于jQuery库的现代浏览器的极简主义JavaScript库。Zepto的API和语法与jQuery的API和语法相同，所以如果你知道jQuery，你就知道Zepto了。Zepto是一个真正的移动优化库，它对于完整的Javascript库来说，是一个非常小的文件大小，非常适合...

zepto是什么【图】

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api。如果你会用jquery，那么你也会用zepto。Zepto.js是什么？Zepto.js是一个轻量的js库，它与jQuery有类似的API。zepto的设计目的是不到10K的通用库，快速下载，有一个熟悉的api-->精力专注在开发上。流行起来的原因：1、轻量；2、只支持现代浏览器。3、非常方便的搭配其他框架（phoneGap）来编写代码；4、优秀的源代码，性能良好。zepto.js源码解析...

【Javascript】zepto源码Callback分析

Callback模块是用来管理回调函数，也作为deferred延迟对象得基础部分，现在一起来看看他的源码。可选参数： Options:once: 是否最多执行一次，memory: 是否记住最近的上下文和参数stopOnFalse: 当某个回调函数返回false时中断执行unique: 相同得回调只被添加一次这是可选参数，下面可以进行试验：var a = function (value) {console.log(a: + value); }; var b = function (value) {console.log(b: + value); }; var callbacks = ...

zepto和jQueryon事件委托在苹果手机

移动端用zepto做的页面，突然发现on绑定的click事件并没有触发，代码如下：<ul> <li class="a">1111111aaaaaaasssss</li> <li class="b">aaaaaaassssss</li> <li class="c">ssssssss</li> </ul> <script>$(document).on(click,.c,function(argument) { alert($(this).html()) }) </script>我把此写法改成非事件委托的方式，发现该click事件就能触发$(‘.a’).on(click,function(argument) { alert($(this).html()) })...

Zepto源码中Gesture模块介绍

Gesture 模块基于 IOS 上的 Gesture 事件的封装，利用 scale 属性，封装出 pinch 系列事件。源码版本本文阅读的源码为 zepto1.2.0GitBook《reading-zepto》整体结构;(function($){if ($.os.ios) { var gesture = {}, gestureTimeout$(document).bind(gesturestart, function(e){...}).bind(gesturechange, function(e){...}).bind(gestureend, function(e){...});[pinch, pinchIn, pinchOut].forEach(function(m){$.fn[m] = fun...

基于zepto的移动端轻量级日期插件--date_picker_jquery【图】

前言做过移动Web开发的同学都知道，移动端日期选择是很常见的需求。在PC端，我们有很丰富的选择，比较出名的就有Mobiscroll和jQuery UI Datepicker。个人看来，这些插件存在的两个显而易见的问题，第一是过重的依赖，对于jQuery的插件，已经强制依赖了80多k的庞然大物，把很多移动端项目拒之门外；第二是太过强大的功能，很多插件花百分之八十的时间去完善插件百分之二十炫酷的额外功能，导致代码量变大，配置繁杂。所以一款少依赖...

zepto.js中tap事件阻止冒泡的实现方法_javascript技巧

本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法。分享给大家供大家参考。具体如下：最近在弄一个手机版的网站，本来想用jQuery Mobile，但文件太大了，所以用了zepto.js 由于移动网页中使用click事件会有延迟，所以就用上了zepto.js中的tap事件。使用click事件可以使用stopPropagation来阻止冒泡，但tap使用该方法无效现在我需要实现这样一个效果：点击a.btn这个按钮，然后显示div.panel，当我点击非div.panel时隐藏div.pa...

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

调用方式 :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=$("#slid...

jQuery插件zepto.js简单实现tab切换_jquery

老规矩，先贴代码$(function(){window.onload = function(){var $li = $('.taocan-title li');var $ul = $('.taocan-content .con110');$li.mouseover(function(){var $this = $(this);var $t = $this.index();$li.removeClass();$this.addClass('active');$ul.css('display','none');$ul.eq($t).css('display','block');})}});以上所述就是本文的全部内容了，希望大家能够喜欢。

zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题_javascript技巧【图】

在移动web开发中，由于手机界面较小，为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题，通过请教他人以及百度，个人感觉swipe.js比较好用。它是一个纯javascript工具，不需要跟其它js库一起导入，同时兼容jQuery和zepto，压缩版的大小只有6kb很适合移动端的开发，它的git地址：https://github.com/thebird/swipe 在git上对其的使用方式介绍的相当清楚，关键代码如下.swipe {overflow: hidden;visibility: hidde...

zepto.js 实时监听输入框的方法

如下所示：$(#phone).on(input, function(e) {//实时监听手机号码输入框变化if($(#phone).val()) {//输入框内容不为空}else{//输入框内容为空}})change事件是在失去焦点的时候生效的。使用input可以很简单的实现输入框的实时监听以上这篇zepto.js 实时监听输入框的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

基于zepto.js实现登录界面【图】

最近使用Zepto.js写的登陆界面，纯js界面，留下来，以后再写登陆可以直接使用了。下面是效果图直接再html中先引入zepto.js的库，再插入下面的代码就可以实现了 createLoginArea(); function createLoginArea() { var field = $(<fieldset />); field.css({ position:absolute, width:60vmin, height:40vmin, border: 1px solid #61B5CF }); field.css(border-radius,1vmin); var legend = $(<legend />); legend.text("登陆"); va...

基于zepto.js实现手机相册功能

看完老师的视频做的一个手机相册，对我这种菜鸟来说还是直接上代码吧！里面用到17张小图，17张大图，还有animate.css和zepto.min.js ,都可以在网上找到。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> <ti...

Zepto实现密码的隐藏/显示【图】

效果图：代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://www.xipwang.cn/js/zepto.min.js"></script> </head> <body> <div class="ui-password"><input type="password" name="" class="passwords"><button class="seepassword" >查看密码</button> </div> <script type="text/javascript">$(function(){(function(){$.fn.showp...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解】教程文章相关的互联网学习教程文章

IE - 相关标签

组件 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程