HTML的全稱為超文字標記語言，是一種標記語言。它包括一系列標籤．通過這些標籤可以將網路上的文件格式統一，使分散的Internet資源連線為一個邏輯整體。HTML文字是由HTML命令組成的描述性文字，HTML命令可以說明文字，圖形、動畫、聲音、表格、連結等。 

外掛簡介

HTML5非常強大，尤其是和CSS3結合，有時候能達到非同凡響的網頁動畫效果。今天要分享的這款HTML5應用就是一款很酷的3D立體圖片相簿應用，它可以用滑鼠拖拽從多個角度瀏覽相簿圖片，點選圖片，就可以放大圖片。

這個HTML5相簿的缺點在於並沒有外掛化，如果你要替換“女朋友”的照片，那麼需要深入到js程式碼中修改，對於一般的使用者來說不是很方便。當然如果你感興趣，也可以自己動手將其封裝成外掛。

外掛預覽

原始碼淺析

HTML程式碼

<canvas id="canvas">你的瀏覽器不支援HTML5畫布技術，請使用谷歌瀏覽器。</canvas>

HTML程式碼非常簡單，就一個canvas畫布。

JavaScript程式碼

"use strict";

(function () {
 /* ==== definitions ==== */
 var diapo = [], layers = [], ctx, pointer, scr, camera, light, fps = 0, quality = [1,2],
 // ---- poly constructor ----
 Poly = function (parent, face) {
  this.parent = parent;
  this.ctx    = ctx;
  this.color  = face.fill || false;
  this.points = [];
  if (!face.img) {
   // ---- create points ----
   for (var i = 0; i < 4; i++) {
    this.points[i] = new ge1doot.transform3D.Point(
     parent.pc.x + (face.x[i] * parent.normalZ) + (face.z[i] * parent.normalX),
     parent.pc.y +  face.y[i],
     parent.pc.z + (face.x[i] * parent.normalX) + (-face.z[i] * parent.normalZ)
    );
   }
   this.points[3].next = false;
  }
 },
 // ---- diapo constructor ----
 Diapo = function (path, img, structure) {
  // ---- create image ----
  this.img = new ge1doot.transform3D.Image(
   this, path + img.img, 1, {
    isLoaded: function(img) {
     img.parent.isLoaded = true;
     img.parent.loaded(img);
    }
   }
  );
  this.visible  = false;
  this.normalX  = img.nx;
  this.normalZ  = img.nz;
  // ---- point center ----
  this.pc = new ge1doot.transform3D.Point(img.x, img.y, img.z);
  // ---- target positions ----
  this.tx = img.x + (img.nx * Math.sqrt(camera.focalLength) * 20);
  this.tz = img.z - (img.nz * Math.sqrt(camera.focalLength) * 20);
  // ---- create polygons ----
  this.poly = [];
  for (var i = -1, p; p = structure[++i];) {
   layers[i] = (p.img === true ? 1 : 2);
   this.poly.push(
    new Poly(this, p)
   );
  }
 },
 // ---- init section ----
 init = function (json) {
  // draw poly primitive
  Poly.prototype.drawPoly = ge1doot.transform3D.drawPoly;
  // ---- init screen ----
  scr = new ge1doot.Screen({
   container: "canvas"
  });
  ctx = scr.ctx;
  scr.resize();
  // ---- init pointer ----
  pointer = new ge1doot.Pointer({
   tap: function () {
    if (camera.over) {
     if (camera.over === camera.target.elem) {
      // ---- return to the center ----
      camera.target.x = 0;
      camera.target.z = 0;
      camera.target.elem = false;
     } else {
      // ---- goto diapo ----
      camera.target.elem = camera.over;
      camera.target.x = camera.over.tx;
      camera.target.z = camera.over.tz;
      // ---- adapt tesselation level to distance ----
      for (var i = 0, d; d = diapo[i++];) {
       var dx = camera.target.x - d.pc.x;
       var dz = camera.target.z - d.pc.z;
       var dist = Math.sqrt(dx * dx + dz * dz);
       var lev = (dist > 1500) ? quality[0] : quality[1];
       d.img.setLevel(lev);
      }
     }
    }
   }
  });
  // ---- init camera ----
  camera = new ge1doot.transform3D.Camera({
 

 

如果你要替換“女朋友”的照片，直接在JS程式碼中替換load部分的圖片陣列即可

長按下方二維碼注公眾號，回覆關鍵字：’相簿‘，即可獲取原始碼下載連結。

 閱讀更多

1. Photoshop CC2018軟體
2. C++學習資料
3. python程式碼報錯看不懂，記住這20個報錯提示單詞輕鬆解決bug
4. windows+linux系統命令大全
5. 電腦技巧：如何徹底關閉電腦右下角閃爍彈窗廣告？
6. PS教程
7. Python小專案（計算器、記事本、小遊戲等），案例詳解，喜歡程式設計的同學們可以收藏！【附原始碼】
8. PPT模板資源，素材，精選加普通設計，共整理收集10000份模板
9. 雪融融來啦，python繪製雪融融陪著“冰墩墩”！！