站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: 基于zepto.js实现仿手机QQ空间的大图查看组件Ima
搜索:
您的位置: 主页 > 教程 > 网页编程 > JavaScript > » 正文

基于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();

Tags:
最新图文资讯
1 2 3 4 5 6
相关文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -