制作手机使用的网页图片查看器

<a url="..."></a>

.dialog,.dialog figure{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1001;}
.dialog section{height:100%;background:#333;-webkit-opacity:0.7;}

.dialog footer{padding:10px;position:absolute;bottom:0;left:0;right:0;z-index:1002;font-size:15px;line-height:30px;}
.dialog footer span{padding:0 20px;float:right;border:1px solid #999;border-radius:15px;color:#ddd;}

.dialog figure{overflow:hidden;}
.dialog figure ul{height:100%;overflow:hidden;}
.dialog figure li{width:100%;height:100%;padding:10px;display:-webkit-box;float:left;position:relative;-webkit-box-pack:center;-webkit-box-align:center;}
.dialog figure img{max-width:100%;width:40px;max-height:100%;height:40px;}

<img src="loading.gif" url="..." />

var obj = document.getElementById(‘swipe‘);
window.mySwipe = Swipe(obj, {
    ...
});

startSlide    : 0, //起始位置
auto          : 3000, //自动播放时间
continuous    : true, //无限循环
disableScroll : false, //触摸时禁止滚屏
callback      : function(index, element){}, //滑动时回调函数, 参数为滑动元素排序与对象
transitionEnd : function(index, element){} //滑动完成后回调函数, 参数同上

prev(); //上一页
next(); //下一页
getPos(); //当前页索引
getNumSlides(); //所有项个数
slide(index, duration); //滑动效果

<figure id="swipe">
    <ul>
        <li></li>
    </ul>
</figure>

figure{overflow:hidden;position:relative;}
figure ul{overflow:hidden;}
figure li{width:100%;float:left;position:relative;}

$(‘.download a‘).click(function(){
    var obj = $(this);
    var url = obj.attr(‘url‘);
    if(url && url.length > 0){
        var set = $(‘.download a[url]‘);
        base_module.picture(obj, set);
        return false;
    };

    ...
});

var base_module = (function(){
    var base = {};
    base.options = {
        LOCK : false
    };

    base.fn = function(){
        ...
    };

    return base;
})();

/**
 * 图片查看器
 * @param object obj 操作对象
 * @param object set 对象集
 */
base.picture = function(obj, set){
    var i    = set.index(obj); //当前页索引
    var rel  = set.length; //所有项个数
    var html = ‘<section class="dialog"><section></section><figure id="swipe"><ul>‘; //开始绘制图片查看器
    set.each(function(){
        var url = $(this).attr(‘url‘); //图片路径
        html += ‘<li><img src="loading.gif" url="‘ + url + ‘" /></li>‘; //循环绘制图片列表
    });
    html += ‘</ul></figure><footer><span id="seat" rel="‘ + rel + ‘">‘ + (i + 1) + ‘/‘ + rel + ‘</span></footer></section>‘; //绘制结束

    $(‘body‘).append(html); //渲染图片查看器
    //js文件加载状态
    base.loadJs(‘swipe.min.js‘, function(){
        base.swiper(i); //回调函数, swipe参数配置
    });

    var url = obj.attr(‘url‘);
    //图片加载状态
    base.loadImg(url, function(){
        base.imager(i); //回调函数, 图片展示
    });
};

/**
 * 按需加载js
 * @param string url 文件路径
 * @param object fn 回调函数
 */
base.loadJs = function(url, fn){
    if(typeof Swipe != ‘undefined‘){
        if(fn) fn();
        return false;
    };

    var js = document.createElement(‘script‘);
    js.setAttribute(‘src‘, url);
    document.getElementsByTagName(‘head‘)[0].appendChild(js);

    js.onload = function(){
        if(fn) fn();
    };
};

/**
 * 幻灯片配置
 * @param int i 排序
 */
base.swiper = function(i){
    var obj = document.getElementById(‘swipe‘);
    window.mySwipe = Swipe(obj, {
        startSlide    : i,
        disableScroll : true,
        callback      : function(index, element){
            var obj = $(‘#seat‘);
            var i   = index + 1;
            var rel = obj.attr(‘rel‘);
            obj.text(i + ‘/‘ + rel);

            var url = $(element).find(‘img‘).attr(‘url‘);
            base.loadImg(url, function(){
                base.imager(index);
            });
        }
    });
};

/**
 * 按需加载img
 * @param string url 文件路径
 * @param object fn 回调函数
 */
base.loadImg = function(url, fn){
    var img = new Image();
    img.src = url;
    if(img.complete){
        if(fn) fn();
        return false;
    };

    img.onload = function(){
        if(fn) fn();
    };
};

/**
 * 展示加载完图片
 * @param int i 排序
 */
base.imager = function(i){
    var obj = $(‘#swipe li‘).eq(i).find(‘img‘);
    var url = obj.attr(‘url‘);
    obj.attr(‘src‘, url).css({‘width‘:‘auto‘, ‘height‘:‘auto‘});
};