并将列表内其它图片同时展示查看器队列内

创设手提式有线电话机选拔的网页图片查看器,手提式有线电电话机网页图片查看器

方今抽空在为品种支出叁个量身的图样查看器,这段时间已开端完毕需要

支付意况是:在五个多文件下载呈现列表中,如检查实验有些文件为图片时,则点击该文件时张开图片查看器彰显该图片,并将列表内任何图片同期展现查看器队列内,可供前后滑动查看及别的附带成效

乍风姿罗曼蒂克听功用点仿佛有个别多并且有些复杂,需求梳理一下

 

意义点收拾

首先,大家要赢得点击的图形文件对象及符合条件的图样文件对象集

其次,图片查看器的制作及图片队列展示

接下来,图片友好加载情势

末尾,图片查看器触摸滑动及滑动后相关效用的落到实处

回顾整理了刹那间,好像也十分的少

 

制作手提式有线话机网页图片查看器

依靠作用点为职业开采做好盘算

率先:大家为已知列表容器内图片文件增多统意气风发标志,文件是或不是为图片及图片路线大家在储存时已知,直接为要素增添统意气风发属性

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

帮助:制作三个全屏湖蓝背景,呈现图片队列,并以NO./n方式标记当前来得图片地点;全部样式全体交付,就不生龙活虎生机勃勃细说了(figure样式内部分属性为swipe.js必得卡塔尔

.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:13px;}
.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%;display:-webkit-box;float:left;position:relative;-webkit-box-pack:center;-webkit-box-align:center;}
.dialog figure img{max-width:100%;max-height:100%;margin:10px;}

下一场:初步化时把图片直接换到loading.gif图片,然后动态加载

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

最终:swipe.js轻量级触摸滑动插件学习运用,先调用

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

配备参数

startSlide    : 0, //起始位置
auto          : 3000, //自动播放时间
continuous    : true, //无限循环; 个人建议所有项个数不确定时赋值false, 不然为2的时候很2
disableScroll : false, //触摸时禁止滚屏
callback      : function(index, element){}, //滑动时回调函数, 参数为滑动元素排序与对象
transitionEnd : function(index, element){} //滑动完成后回调函数, 参数同上

API方法

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

基本html结构

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

必须的css属性

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

很随意体量依旧文书档案都相当的轻便,非常的大约轻松上手

swipe.min.js下载

 

风流罗曼蒂克体化开拓标准启幕

作者们因此列表的统一触发事件,获取触发对象的url属性,如该属性存在则调用图片查看器并终止前面进去下载分界面程序

$('.download a').click(function(){
    var obj = $(this);
    var url = obj.attr('url');
    if(url && url.length > 0){
        var set = $('.download a[url]');
        base_module.dialog(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.dialog = 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="http://www.bkjia.com/uploads/allimg/150116/1634436106-0.gif" width="40" height="40" url="'   url   '" /></li>'; //循环绘制图片列表
    });
    html  = '</ul></figure><footer>'   (i   1)   '/'   rel   '</footer></section>'; //绘制结束

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

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

按需加载swipe.js

/**
 * 按需加载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.src = url;
    document.getElementsByTagName('head')[0].appendChild(js);

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

配置swipe.js参数

/**
 * 幻灯片配置
 * @param int i 当前页索引
 */
base.swiper = function(i){
    var obj = document.getElementById('swipe');
    window.mySwipe = Swipe(obj, {
        startSlide    : i,
        continuous    : false,
        disableScroll : true,
        callback      : function(index, element){
            var i = index   1;
            var s = $('#swipe li').length;
            $('#po').text(i   '/'   s);

            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.replaceWith('<img src="'   url   '" />');
};

居功至伟告成!现在盛行没图你说个JB,图来了

图片 1

或然 点小编看链接

 

一时还只是早前告竣,后边还需优化完备,首要有以下几点

图表查看器已绘制作而成功,关闭时不该删除而是掩盖;重新调用查看器时,如图片列表未有成形则直接唤起而无需再一次绘制

图形不能够放手收缩,宽低渡过长意况下,预览效果会很糟糕不能够看清图片

还没缩略图,开辟时才意识大家存款和储蓄图片时竟然未有裁减管理图片,加载图片时代风尚量太坑,当然那一个难题作者首先要在后台存款和储蓄时处理

 

那多少个坑前边小编会大器晚成生机勃勃填上

这段时间抽空在为品种支出二个量身的图片查看器,近年来已最初成功要求开采意况是...

本文由金沙澳门官网-www.js333com-金沙js333com发布于金沙澳门官网计算机,转载请注明出处:并将列表内其它图片同时展示查看器队列内

您可能还会对下面的文章感兴趣: