[转载代码] 超酷的HTML 3D动态效果

本帖最后由 CrLf 于 2014-8-19 00:07 编辑

以前看过，印象很深，搜了半天终于找出来了
以下代码转自 http://www.codefans.net/jscss/code/2956.shtml，这个应该是最原始的出处
--------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head> 
  <title>Wanna tell her - interactive DHTML</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">
/* ==== 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.codefans.net/jscss/demoimg/201112/2_cicadu.gif" /> 
  </div> 
  <div id="FPS"></div>  
 </body>
</html>
复制代码

链接：在线第三方命令行工具下载 bat、vbs、js 原生混编

CrLf

论坛巡查

Rank: 8 Rank: 8

帖子: 6388
积分: 18843
技术: 982
捐助: 100
注册时间: 2010-10-9

2楼

发表于 2014-8-19 00:08 | 只看该作者

上文代码可以保存为 *.hta 文件

链接：在线第三方命令行工具下载 bat、vbs、js 原生混编

TOP

523066680

版主

Rank: 7 Rank: 7 Rank: 7

帖子: 3151
积分: 6455
技术: 317
捐助: 70
注册时间: 2008-8-3

3楼

发表于 2014-8-19 10:14 | 只看该作者

记得在cnbeta上看到几个HTML5特效合集，挺棒的，又搜了一下，找不到以前那个了。

15个令人震惊的HTML5实验

10个让人眼花缭乱的 HTML5 和 JavaScript 效果

八大疯狂的HTML5 Canvas及WebGL动画效果

FuniCode 编程论坛

TOP

返回列表

[新手上路]批处理新手入门导读	[视频教程]批处理基础视频教程	[视频教程]VBS基础视频教程	[批处理精品]批处理版照片整理器
[批处理精品]纯批处理备份&还原驱动	[批处理精品]CMD命令50条不能说的秘密	[在线下载]第三方命令行工具	[在线帮助]VBScript / JScript 在线参考

[转载代码] 超酷的HTML 3D动态效果

[收藏此主题] [关注此主题的新回复]

[通过 QQ、MSN 分享给朋友]