<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title> DHTML特效，非常酷的3D翻转相册展示特效</title>

<meta http-equiv="imagetoolbar" content="no">

<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">

/* ==== Easing function ==== */

var Library = {};

Library.ease = function () {

this.target = 0;

this.position = 0;

this.move = function (target, speed) {

this.position += (target - this.position) * speed;

}

}

var tv = {

/* ==== variables ==== */

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) {

/* ==== create HTML image element ==== */

var o = document.createElement('img');

o.src = i.src;

tv.screen.obj.appendChild(o);

/* ==== 3D coordinates ==== */

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;

/* ==== push object ==== */

o.point2D = {};

tv.O.push(o);

/* ==== on mouse over event ==== */

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;

}

/* ==== on mousedown event ==== */

o.onmousedown = function () {

if (this == tv.o) {

if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0;

else {

tv.o = false;

this.onmouseover();

}

}

}

/* ==== main 3D function ==== */

o.animate = function () {

/* ==== 3D coordinates ==== */

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);

/* ==== rotations ==== */

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;

/* ==== 2D transform ==== */

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));

/* ==== HTML rendering ==== */

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);

}

},

/* ==== init script ==== */

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;

/* ==== create objects ==== */

var i = 0, o;

while( o = structure[i++] )

this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh);

/* ==== start script ==== */

this.resize();

mouse.y = this.screen.y + this.screen.h;

mouse.x = this.screen.x + this.screen.w;

/* ==== loop ==== */

setInterval(tv.run, 16);

setInterval(tv.dFPS, 1000);

},

/* ==== resize window ==== */

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; o = o.offsetParent) {

tv.screen.x += o.offsetLeft;

tv.screen.y += o.offsetTop;

}

}

},

/* ==== main loop ==== */

run : function () {

tv.fps++;

/* ==== motion ease ==== */

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);

/* ==== angles sin and cos ==== */

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);

/* ==== loop through images ==== */

var i = 0, o;

while( o = tv.O[i++] ) o.animate();

},

/* ==== trace frames per seconds ==== */

dFPS : function () {

document.getElementById('FPS').innerHTML = tv.fps + ' FPS';

tv.fps = 0;

}

}

/* ==== global mouse position ==== */

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;

}

/* ==== starting script ==== */

onload = function() {

onresize = tv.resize;

/* ==== build grid ==== */

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

/* ==== let's go ==== */

tv.init(structure, 350, -200, .005, .0025);

}

</script>

</head>

<body>

<div id="screen"></div>

<div id="bankImages">

<img alt="" src="http://www.alixixi.cn/skins/GRAY2010/logo3.gif">

</div>

<div id="FPS"></div>

</body>

</html>

注意！此代码只能插入一张最大规格为256*256的图片，不能多于1张或者超出范围的图片 ，如需更改请自己研究^.^

超炫的3D HTML源代码的更多相关文章

  1. 我用 CSS3 实现了一个超炫的 3D 加载动画

    今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...

  2. 超炫的3D翻转模板

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 7款超酷HTML5 3D动画精选应用及源码

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  4. 优秀前端开发教程：超炫的 Mobile App 3D 演示

    今天,我们想与您分享一个实验性的3D效果.它涉及到一个3D移动设备和一些移动应用程序截图.点击切换按钮时,我们将让移动设备转动并移动每个画面,使我们能看到一个分层的视图.你可能之前没见过这种应用程序演 ...

  5. 一款纯css3实现的超炫3D表单

    今天要给大家分享一款纯css3实现的超炫3D表单.该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正.效果非常炫,一起看下效果图: 在线预览   源码下载 实现的代码. html代码 ...

  6. css3 animate写的超炫3D转换

    上一篇中介绍了animate的基本的属性,这一篇讲的则是关于animate以及transforms的使用 <!DOCTYPE html><html lang="en&quo ...

  7. Cool！15个超炫的 CSS3 文本特效【上篇】

    每一个网页设计师都希望创建出让用户能够赏识的网站.当然,这是不可能满足每个人的口味的.幸运的是,我们有最强大的工具和资源.实际上,我们非常多的网站模板,框架,内容管理系统,先进的工具和其他的资源可以使 ...

  8. 8个超炫酷的纯CSS3动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

  9. 8个超炫酷仿HTML5动画源码

    1.jQuery万年历插件 带农历老皇历功能 这是一款基于jQuery的日历插件,这款日历插件和之前分享的日历控件有很大差异,它是一本万年历,包含了农历已经老皇历的功能,是一个挑好日子的工具.同时日历 ...

随机推荐

  1. session配置理解

    session.cache_limiter 指定会话页面所使用的缓冲控制方法,默认为nocache.session.cache_expire 以分钟数指定缓冲的会话页面的存活期,默认为180.此设定对 ...

  2. Heterogeneous System Architecture

    https://en.wikipedia.org/wiki/Heterogeneous_System_Architecture Steps performed when offloading calc ...

  3. changing a pointer rather than erasing memory cells

    Computer Science An Overview _J. Glenn Brookshear _11th Edition In a data structure based on a point ...

  4. Apache Kafka源码分析 - KafkaApis

    kafka apis反映出kafka broker server可以提供哪些服务,broker server主要和producer,consumer,controller有交互,搞清这些api就清楚了 ...

  5. AndEngine

    AndEngine http://www.oschina.net/question/54100_16765

  6. Bootstrap 进度条媒体对象和 Well 组件

    一．Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...

  7. FW Docker为容器分配指定物理网段的静态IP

    官方有关于网桥和IP配置的文档地址:https://docs.docker.com/articles/networking/ 1.宿主机(系统采用ubuntu-14.04.1-server-amd64 ...

  8. ios证书

    内容提要: 安装app时提示 “无法下载应用,此时无法安装“XXX””.我遇到过多次是由于ios的app出现证书问题.本篇文章讲解用ios证书制作过程,以及每个步骤的解释. 正文: Xcode签名至少 ...

  9. ArcGIS API for Silverlight加载google地图（后续篇）

    原文:ArcGIS API for Silverlight加载google地图(后续篇) 之前在博客中(http://blog.csdn.net/taomanman/article/details/8 ...

  10. Surround the Trees---hdu1392（凸包GraHam模板）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1392 题意:有n棵树,每棵树有一个坐标,想用一些绳子把这些树包含起来,求需要绳子的长度: 就是求凸包的 ...