- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <title>【薦】超絢的JavaScript立體圖片展示代碼 - www.webdm.cn</title>
- <style type="text/css">
- html {
- overflow: hidden;
- }
- 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;
- }
- #screen img {
- position: absolute;
- cursor: pointer;
- width: 0px;
- height: 0px;
- -ms-interpolation-mode:nearest-neighbor;
- }
- #bankImages {
- visibility: hidden;
- }
- #FPS {
- position: absolute;
- right: 5px;
- bottom: 5px;
- font-size: 10px;
- color: #666;
- font-family: verdana;
- }
- </style>
- <script type="text/javascript">
- var Library = {};
- Library.ease = function () {
- this.target = 0;
- this.position = 0;
- this.move = function (target, speed) {
- this.position += (target - this.position) * speed;
- }
- }
- var tv = {
- O : [],
- fps : 0,
- screen : {},
- angle : {
- x : new Library.ease(),
- y : new Library.ease()
- },
- camera : {
- x : new Library.ease(),
- y : new Library.ease()
- },
- create3DHTML : function (i, x, y, z, sw, sh) {
- var o = document.createElement('img');
- o.src = i.src;
- tv.screen.obj.appendChild(o);
- o.point3D = {
- x : x,
- y : y,
- z : new Library.ease(),
- sw : sw,
- sh : sh,
- w : i.width,
- h : i.height
- };
- o.point3D.z.target = z;
- o.point2D = {};
- tv.O.push(o);
- o.onmouseover = function () {
- if (this != tv.o) {
- this.point3D.z.target = tv.mouseZ;
- tv.camera.x.target = this.point3D.x;
- tv.camera.y.target = this.point3D.y;
- if (tv.o) tv.o.point3D.z.target = 0;
- tv.o = this;
- }
- return false;
- }
- o.onmousedown = function () {
- if (this == tv.o) {
- if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0;
- else {
- tv.o = false;
- this.
- }
- }
- }
- o.animate = function () {
- var x = this.point3D.x - tv.camera.x.position;
- var y = this.point3D.y - tv.camera.y.position;
- this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08);
- var xy = tv.angle.cx * y - tv.angle.sx * this.point3D.z.position;
- var xz = tv.angle.sx * y + tv.angle.cx * this.point3D.z.position;
- var yz = tv.angle.cy * xz - tv.angle.sy * x;
- var yx = tv.angle.sy * xz + tv.angle.cy * x;
- var scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
- x = yx * scale;
- y = xy * scale;
- var w = Math.round(Math.max(0, this.point3D.w * scale * this.point3D.sw));
- var h = Math.round(Math.max(0, this.point3D.h * scale * this.point3D.sh));
- var o = this.style;
- o.left = Math.round(x + tv.screen.w - w * .5) + 'px';
- o.top = Math.round(y + tv.screen.h - h * .5) + 'px';
- o.width = w + 'px';
- o.height = h + 'px';
- o.zIndex = 10000 + Math.round(scale * 1000);
- }
- },
- /* ==== http://www.webdm.cn ==== */
- init : function (structure, FL, mouseZ, rx, ry) {
- this.screen.obj = document.getElementById('screen');
- this.screen.obj.onselectstart = function () { return false; }
- this.screen.obj.ondrag = function () { return false; }
- this.mouseZ = mouseZ;
- this.camera.focalLength = FL;
- this.angle.rx = rx;
- this.angle.ry = ry;
- var i = 0, o;
- while( o = structure[i++] )
- this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh);
- this.resize();
- mouse.y = this.screen.y + this.screen.h;
- mouse.x = this.screen.x + this.screen.w;
- setInterval(tv.run, 16);
- setInterval(tv.dFPS, 1000);
- },
- resize : function () {
- var o = tv.screen.obj;
- if (o) {
- tv.screen.w = o.offsetWidth / 2;
- tv.screen.h = o.offsetHeight / 2;
- for (tv.screen.x = 0, tv.screen.y = 0; o != null; oo = o.offsetParent) {
- tv.screen.x += o.offsetLeft;
- tv.screen.y += o.offsetTop;
- }
- }
- },
- run : function () {
- tv.fps++;
- tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * tv.angle.rx, .1);
- tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * tv.angle.ry, .1);
- tv.camera.x.move(tv.camera.x.target, .025);
- tv.camera.y.move(tv.camera.y.target, .025);
- tv.angle.cx = Math.cos(tv.angle.x.position);
- tv.angle.sx = Math.sin(tv.angle.x.position);
- tv.angle.cy = Math.cos(tv.angle.y.position);
- tv.angle.sy = Math.sin(tv.angle.y.position);
- var i = 0, o;
- while( o = tv.O[i++] ) o.animate();
- },
- dFPS : function () {
- document.getElementById('FPS').innerHTML = tv.fps + ' FPS';
- tv.fps = 0;
- }
- }
- var mouse = {
- x : 0,
- y : 0
- }
- document.onmousemove = function(e) {
- if (window.event) e = window.event;
- mouse.x = e.clientX;
- mouse.y = e.clientY;
- return false;
- }
- onload = function() {
- onresize = tv.resize;
- var img = document.getElementById('bankImages').getElementsByTagName('img');
- var structure = [];
- for (var i = -300; i <= 300; i += 120)
- for (var j = -300; j <= 300; j += 120)
- structure.push({ img:img[0], x:i, y:j, z:0, sw:.5, sh:.5 });
- tv.init(structure, 350, -200, .005, .0025);
- }
- </script>
- </head>
- <body>
- <div id="screen"></div>
- <div id="bankImages">
- <img alt="" src="http://www.webdm.cn/images/wall1_s.jpg">
- </div>
- <div id="FPS"></div>
- </body>
- </html>
- <br>
- <a href="http://www.webdm.cn">網頁代碼站</a> - 最專業的代碼下載網站 - 致力爲中國站長提供有質量的代碼！
圖片3D展示，鼠標晃動的時候圖片跟着就動了，點擊的時候會稍微放大一些，不同的角度會出現不一樣的效果，JavaScript與CSS結合共同形成的效果。