首頁  >  文章  >  web前端  >  行動端js圖片檢視器

行動端js圖片檢視器

高洛峰
高洛峰原創
2016-12-06 15:10:101686瀏覽

本文實例為大家分享了js圖片檢視器插件的使用方法,製作手機使用的網頁圖片檢視器,供大家參考,具體內容如下

這幾天抽空在為專案開發一個量身的圖片檢視器,目前已初步完成需求。

開發場景是:在一個多文件下載展示列表中,如檢測某些文件為圖片時,則點擊該文件時打開圖片查看器展示該圖片,並將列表內其它圖片同時展示查看器隊列內,可供前後滑動查看及其它附帶功能。

乍一聽功能點似乎有點多而且有些複雜,需要梳理一下

功能點整理

首先,我們要獲得點擊的圖片文件對象及符合條件的圖片文件對象集

其次,圖片查看器的製作及圖片佇列展示

然後,圖片友善載入方式

最後,圖片檢視器觸控滑動及滑動後相關功能的實現

簡單整理了一下,好像也不多 

製作手機網頁圖片檢視器

根據功能點為正式開發做好準備

首先:我們為已知列表容器內圖片文件添加統一標識,文件是否為圖片及圖片路徑我們在存儲時已知,直接為元素添加統一屬性


其次:製作一個全螢幕灰色背景,展示圖片隊列,並以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圖片,然後動態載入

行動端js圖片檢視器

最後: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){} //滑动完成后回调函数, 参数同上
r

基本html結構

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

   

必須的css屬性

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

   

完整開發正式開始

我們通過列表的統一觸發事件,獲取觸發對象的url屬性,如該屬性存在則調用圖片查看器並停止後面進入下載界面程序

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

   

現在進入數據收集完畢後加工處理環處理環,首先展示一下我們的對像模型,對像模型的屬性及方法的定義規則

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

   

編寫圖片查看器主函數

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

   

按需加載swipe.js

/**
 * 图片查看器
 * @param object obj 操作对象
 * @param object set 对象集
 */
base.dialog = function(obj, set){
 var i = set.index(obj); //当前页索引
 var rel = set.length; //所有项个数
 var html = &#39;<section class="dialog"><section></section><figure id="swipe"><ul>&#39;; //开始绘制图片查看器
 set.each(function(){
  var url = $(this).attr(&#39;url&#39;); //图片路径
  html += &#39;<li><img src="loading.gif" width="40" height="40" url="&#39; + url + &#39;" /></li>&#39;; //循环绘制图片列表
 });
 html += &#39;</ul></figure><footer><span id="po">&#39; + (i + 1) + &#39;/&#39; + rel + &#39;</span></footer></section>&#39;; //绘制结束
 
 $(&#39;body&#39;).append(html); //渲染图片查看器
 //js文件加载状态
 base.loadJs(&#39;swipe.min.js&#39;, function(){
  base.swiper(i); //回调函数, swipe参数配置
 });
 
 var url = obj.attr(&#39;url&#39;);
 //图片加载状态
 base.loadImg(url, function(){
  base.imager(i); //回调函数, 图片展示
 });
};

   

設定swipe.js參數

/**
 * 按需加载js
 * @param string url 文件路径
 * @param object fn 回调函数
 */
base.loadJs = function(url, fn){
 if(typeof Swipe != &#39;undefined&#39;){
  if(fn) fn();
  return false;
 };
 
 var js = document.createElement(&#39;script&#39;);
 js.src = url;
 document.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
 
 js.onload = function(){
  if(fn) fn();
 };
};

   

隨選載入圖片

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

   

需優化完善,主要有以下幾點

圖片檢視器已繪製成功,關閉時不應該刪除而是隱藏;重新調用檢視器時,如圖片清單沒有變化則直接喚起而不必重新繪製;

圖片不能放大收縮,寬高度過長情況下,預覽效果會很差無法看清圖片;

沒有縮圖,開發時才發現我們存儲圖片時居然沒有壓縮處理圖形,加載圖片時流量太坑,當然這個問題本身首先要在後台存儲時處理。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn