1、准备好需要用到的图标。
2、新建html文档。
3、新建html文档。<div id="tt"></div><div id="screen"></div><div id="bankImages"> <img alt="" src="images/laia.png"> </div>
4、书写css代码。<style>html { overflow: hidden; -ms-t泠贾高框ouch-action: none; -ms-content-zooming: none; }body { position: absolute; margin: 0px; padding: 0px; background: #fff; width: 100%; height: 100%; }#screen { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; background: #fff; -webkit-touch-callout: none; }#screen img { position: absolute; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }#bankImages { visibility: hidden; }</style>
5、书写并添加js蜣贺鱿柢代码。<script>"use strict";(function () { var Ease = function () { this.target = 0; this.position = 0; } Ease.prototype.move = function (target, speed) { this.position += (target - this.position) * speed; } var scr, pointer, mouseZ, over, zoom, buffer = [], angle = { x : new Ease(), y : new Ease() }, camera = { x : new Ease(), y : new Ease(), focalLength : 500 }, create3DHTML = function (i, x, y, z) { var img = document.createElement('img'); img.src = i.src; scr.elem.appendChild(img); var Elem = function (img, x, y) { this.img = img; this.img.parent = this; this.point3D = { x : x, y : y, z : new Ease(), w : img.width * zoom, h : img.height * zoom }; this.next = true; } Elem.prototype.animate = function () { var x = this.point3D.x - camera.x.position; var y = this.point3D.y - camera.y.position; this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08); var xy = angle.cx * y - angle.sx * this.point3D.z.position; var xz = angle.sx * y + angle.cx * this.point3D.z.position; var yz = angle.cy * xz - angle.sy * x; var yx = angle.sy * xz + angle.cy * x; var scale = camera.focalLength / (camera.focalLength + yz); x = yx * scale; y = xy * scale; var w = Math.round(Math.max(0, this.point3D.w * scale * 0.5)); var h = Math.round(Math.max(0, this.point3D.h * scale * 0.5)); var o = this.img.style; o.left = Math.round(x + scr.width * 0.5 - w * .5) + 'px'; o.top = Math.round(y + scr.height * 0.5 - h * .5) + 'px'; o.width = w + 'px'; o.height = h + 'px'; o.zIndex = 1000 + Math.round(scale * 100); return this.next; } var obj = new Elem(img, x, y); obj.point3D.z.target = z; buffer.push(obj); }, selectElem = function () { var element = document.elementFromPoint(pointer.Xr, pointer.Yr); if (element.parent && element.parent !== over) { element.parent.point3D.z.target = mouseZ; camera.x.target = element.parent.point3D.x; camera.y.target = element.parent.point3D.y; if (over) over.point3D.z.target = 0; over = element.parent; } }, init = function (FL, mZ, rx, ry) { scr = new ge1doot.Screen({ container: "screen" }); pointer = new ge1doot.Pointer({ tap: function() { selectElem(); }, move: function () { selectElem(); } }); var img = document.getElementById('bankImages').getElementsByTagName('img'); zoom = Math.max(scr.width, scr.height) / 1000; for (var i = -300; i <= 300; i += 120) { for (var j = -300; j <= 300; j += 120) { create3DHTML( img[0], i * zoom, j * zoom, 0 ); } } buffer[buffer.length - 1].next = false; mouseZ = mZ * zoom; camera.focalLength = FL; angle.rx = rx / zoom; angle.ry = ry / zoom; pointer.Y = scr.height * 0.5; pointer.X = scr.width * 0.5; run(); }, run = function () { angle.x.move(-(pointer.Y - scr.height * 0.5) * angle.rx, .1); angle.y.move( (pointer.X - scr.width * 0.5) * angle.ry, .1); camera.x.move(camera.x.target, .025); camera.y.move(camera.y.target, .025); angle.cx = Math.cos(angle.x.position); angle.cy = Math.cos(angle.y.position); angle.sx = Math.sin(angle.x.position); angle.sy = Math.sin(angle.y.position); for ( var i = 0; buffer[i++].animate(); ); requestAnimFrame(run); }return { load : function () { window.addEventListener('load', function () { init(350, -200, .005, .0025); }, false); } }})().load();</script>
6、代码整体结构。
7、查看效果。
