Mobiler js-Bildbetrachter

Das Beispiel in diesem Artikel zeigt Ihnen, wie Sie mit dem js-Bildbetrachter-Plug-in einen Webseiten-Bildbetrachter für Mobiltelefone als Referenz erstellen. Der spezifische Inhalt lautet wie folgt:

Ich habe in diesen Tagen an dem Projekt gearbeitet, einen maßgeschneiderten Bildbetrachter zu entwickeln, und die Anforderungen wurden zunächst erfüllt.

Das Entwicklungsszenario ist: Wenn in einer Download-Anzeigeliste mit mehreren Dateien festgestellt wird, dass es sich bei einigen Dateien um Bilder handelt, wird beim Klicken auf die Datei der Bildbetrachter geöffnet, um das Bild usw. anzuzeigen Bilder in der Liste werden gleichzeitig angezeigt und angezeigt. In der Browser-Warteschlange können Sie hin und her blättern, um sie anzuzeigen und andere Nebenfunktionen auszuführen.

Auf den ersten Blick scheinen die Funktionspunkte etwas zu zahlreich und kompliziert zu sein. Wir müssen sie klären.

Zweitens die Produktion von Bildbetrachter und Bildwarteschlange Anzeige

Dann die bildfreundliche Lademethode

Schließlich bezieht sich der Bildbetrachter auf Touch-Sliding und Sliding. Die Implementierung der Funktionen

wurde dort einfach geklärt Scheint nicht viel zu sein

Erstellen eines mobilen Webseiten-Bildbetrachters

Bereiten Sie sich auf die formale Entwicklung basierend auf Funktionspunkten vor

Zuerst: Wir fügen der Bilddatei eine einheitliche Kennung hinzu Der bekannte Listencontainer. Wir wissen, ob es sich bei der Datei um ein Bild und den Bildpfad handelt, und fügen dem Element direkt ein einheitliches Attribut hinzu

a7700858dedb4b7087a5467c82f56f614a11e5928b3688cf38c9163b657eb5ac

Zweitens: Erstellen Sie einen grauen Vollbildhintergrund, um die Bildwarteschlange anzuzeigen, und markieren Sie die aktuell angezeigte Bildposition in Form von NO./n; alle Stile sind angegeben, dann habe ich gewonnen Gehen Sie nicht einzeln auf Details ein (einige Attribute im Figurenstil sind für swipe.js erforderlich)

.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;}

Dann: Ändern Sie das Bild direkt in Wird während der Initialisierung geladen. GIF-Bild, dann dynamisch laden

a88c211a817030c162e5becf4c2842fa

Zuletzt: swipe.js Lightweight Touch Um die Verwendung des Schiebe-Plug-Ins zu erlernen, rufen Sie zunächst

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

Konfigurationsparameter

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

API-Methoden

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

Grundlegende HTML-Struktur

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

Erforderliche CSS-Attribute

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

Es ist sowohl in der Größe als auch im Dokument sehr leicht, sehr einfach und benutzerfreundlich

swipe.min.js herunterladen

Die vollständige Entwicklung hat offiziell begonnen

Wir erhalten das URL-Attribut des Triggerobjekts über das einheitliche Triggerereignis der Liste. Wenn das Attribut vorhanden ist, rufen Sie das Bild auf Viewer und stoppen Sie das anschließende Download-Schnittstellenprogramm

$('.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;
 };
 
 ...
});

Jetzt treten wir nach der Datenerfassung in den Nachbearbeitungsprozess ein. Zuerst zeigen wir unser Objektmodell. die Definitionsregeln der Attribute und Methoden des Objektmodells

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

Schreiben Sie die Hauptfunktion des Bildbetrachters

/**
 * 图片查看器
 * @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 bei Bedarf laden

/**
 * 按需加载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-Parameter konfigurieren

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

Bilder bei Bedarf laden

/**
 * 按需加载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();
 };
};

Wird angezeigt, nachdem das Bild geladen wurde

/**
 * 展示加载完图片
 * @param int i 当前页索引
 */
base.imager = function(i){
 var obj = $('#swipe li').eq(i).find('img');
 var url = obj.attr('url');
 obj.replaceWith(&#39;<img src="&#39; + url + &#39;" />&#39;);
};

Es ist derzeit nur vorläufig abgeschlossen, was später optimiert und verbessert werden muss, hauptsächlich die folgenden Punkte

Der Bildbetrachter wurde erfolgreich gezeichnet und sollte nicht gelöscht, sondern ausgeblendet, wenn der Viewer erneut aufgerufen wird und sich die Bildliste nicht geändert hat, ohne dass ein Neuzeichnen erforderlich ist Die Breite und Höhe sind zu lang, der Vorschaueffekt ist sehr schlecht und das Bild ist nicht klar zu sehen. Es gibt keine Komprimierung für die Grafikverarbeitung und der Datenverkehr beim Laden von Bildern ist natürlich zuerst werden während der Hintergrundspeicherung behandelt.