HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 

插件简介

HTML5非常强大，尤其是和CSS3结合，有时候能达到非同凡响的网页动画效果。今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用，它可以用鼠标拖拽从多个角度浏览相册图片，点击图片，就可以放大图片。

这个HTML5相册的缺点在于并没有插件化，如果你要替换“女朋友”的照片，那么需要深入到js代码中修改，对于一般的使用者来说不是很方便。当然如果你感兴趣，也可以自己动手将其封装成插件。

插件预览

源码浅析

HTML代码

你的浏览器不支持HTML5画布技术，请使用谷歌浏览器。

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绘制雪融融陪着“冰墩墩”！！