モバイルjs画像ビューア

この記事の例では、js 画像ビューアー プラグインを使用して携帯電話用の Web ページ画像ビューアーを作成する方法を共有します。具体的な内容は次のとおりです。

時間をかけて開発しました。最近のプロジェクトに合わせてカスタマイズされた画像ビューアを使用すると、要件はすでに完了しています。

開発シナリオは次のとおりです。複数ファイルのダウンロード表示リストで、一部のファイルが画像として検出された場合、ファイルをクリックすると画像ビューアが開いて画像が表示され、リスト内の他の画像が表示されます。同時にビューアキューに表示され、前後にスライドして表示するなどの付随機能が利用できます。

一見すると、関数ポイントは少し多すぎて複雑に見えますが、それらを整理する必要があります

関数ポイントの構成

まず、クリックされた画像ファイルオブジェクトと対象となる画像ファイルのセットを取得する必要があります。画像ファイルオブジェクト

次に、画像ビューアの制作と画像キューの表示

次に、画像に優しい読み込み方法

最後に、画像ビューアでのタッチスライドとスライド後の関連機能の実現

簡単な配置のようですそれほど多くはありません

モバイル Web ページの画像ビューアを作成します

関数ポイントに基づいて正式な開発の準備をします

最初に、既知のリスト コンテナ内の画像ファイルに統一識別子を追加します。ファイルが画像であるかどうかがわかります。保存時に画像パスを指定し、要素に統合属性を直接追加します

920c72025a186b477b7a169cdeb977ca5db79b134e9f6b82c0b36e0489ee08ed

2番目: 全画面の灰色の背景を作成し、画像を表示しますキューを作成し、現在表示されている画像の位置を NO./n の形式でマークします。すべてのスタイルが指定されていますが、1 つずつ詳細には説明しません (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画像に変更し、それを動的にロードします

a88c211a817030c162e5becf4c2842fa

最後に: 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;
})();

オンデマンドで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); //回调函数, 图片展示
 });
};

拭く。 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();
 };
};

オンデマンドで画像をロード

/**
 * 幻灯片配置
 * @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();
 };
};

現時点では暫定的に完成しただけで、後でさらに多くの作業を行う必要があります最適化され完璧な、主なポイントは次のとおりです

画像ビューアは正常に描画されているため、削除しないでください。ビューアを再度呼び出すと閉じたときに非表示になります。画像リストが変更されない場合は、ビューアが呼び出されます。再描画せずに直接;

画像を拡大することはできません。幅と高さが長すぎると、プレビュー効果が非常に低くなり、画像がはっきりと見えなくなります。

サムネイルはありません。写真を保存するときにグラフィックスを圧縮していないことがわかりました。もちろん、この問題自体は、バックグラウンドで保存するときに最初に処理する必要があります。