`
java.hero
  • 浏览: 2890 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

欣赏一下火星人写的JS

阅读更多
前言:
据BBC报道美国一火星探测器在绕火探测过程中检测到一神秘信号,后经贝尔实验室解析后发现是一段母牛坐蒸笼的JS,本人不敢独享,特转来献给JE的兄弟姐妹.出处:[转火星探测器]
说明:拷贝代码下来另存为html即可运行。
<!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>
<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://avatar.profile.csdn.net/D/0/9/2_cicadu.jpg">
</div>
<div id="FPS"> </div>

</body>
</html>
分享到:
评论
48 楼 wangjin0471 2009-10-24  
神奇,牛!
47 楼 lucane 2009-04-29  
好神奇
不过javascript最大的问题就是内存和安全吧
blogcn上cloudgamer写的tween效果也很牛。。。
46 楼 ry.china 2009-04-29  
非常奇大的东东
45 楼 ailin_smile 2009-04-20  
太强了,地球人真还很难写出这东西来,效率真高啊
44 楼 baichenhong 2009-04-20  
神奇。。。
43 楼 greencoffee 2009-04-20  
怎一个牛X了得
42 楼 swen00 2009-04-17  
很炫,收藏了

41 楼 chrrity 2009-04-17  
so cool
40 楼 Relucent 2009-04-17  
3D效果。没想到JS能做到这种地步。
39 楼 woods 2009-01-22  
http://ihere.appspot.com/album/OuterHeaven/

XD  我山寨啦 哈哈 XD   
http://ihere.appspot.com/album/  在这里上传
38 楼 woods 2009-01-22  
哈哈 这个真nb  有意思 研究研究
37 楼 zbird 2009-01-21  
IE下不费CPU
36 楼 swg_1982 2009-01-21  
真的很是牛叉
35 楼 hbing110 2009-01-16  
我看啊这个是从火星底下挖出来的
34 楼 fuyun 2009-01-16  
不是一般的牛~!简直就是火星来的牛~!虽比较占CPU,但js能发挥到这种地步,那是相当的牛了!
貌似这还是第一次看到用js也能写出3D的效果来!
看来,js的前途更为的光明哈~……
33 楼 sheepdolly 2009-01-14  
N X 啊
32 楼 土匪一份子 2009-01-14  
真牛X。。。
31 楼 protti 2009-01-14  
很晕人的效果
30 楼 wmcoo 2009-01-14  
NB的顶
29 楼 hrj324 2009-01-14  
太厉害了,

相关推荐

    noip火星人源程序

    这种交流方法是这样的,首先,火星人把一个非常大的数字告诉人类科学家,科学家破解这个数字的含义后,再把一个很小的数字加到这个大数上面,把结果告诉火星人,作为人类的回答。 火星人用一种非常简单的方式来表示...

    js火星文转化,html火星文转化

    `huoxing.js`可能是一个实现火星文转换功能的JavaScript脚本。在JavaScript中,我们可以使用各种字符串方法,如`split()`来分割字符串,`replace()`或正则表达式来替换特定字符,以及`join()`来重新组合字符串。例如...

    火星人影音播放器(C#版)

    火星人影音播放器是一款专为用户打造的免费多媒体播放软件,尤其吸引人的地方在于它采用C#编程语言进行开发,这使得它在易用性、性能和稳定性上都有一定的优势。C#是一种现代化的面向对象的编程语言,由微软公司推出...

    火星人敏捷开发手册

    《火星人敏捷开发手册》是一本专注于敏捷开发实践的指南,由火星人出版,以图文并茂的方式深入浅出地阐述了敏捷开发的核心理念和实施方法。这本书的目的是帮助读者理解并掌握敏捷开发这一现代软件开发的重要模式。 ...

    火星人:首次公开发行股票并在创业板上市招股说明书.PDF

    火星人:首次公开发行股票并在创业板上市招股说明书.PDF

    火星人敏捷开发手册.pdf

    火星人敏捷开发手册是一份基于Scrum敏捷方法的培训资料,旨在帮助读者理解和应用敏捷开发理念,特别是Scrum框架。Scrum是一种灵活且注重实效的项目管理方法,源自体育中的橄榄球战术,强调团队协作和适应变化。手册...

    20210524-中信证券-火星人-300894-投资价值分析报告:“线上+线下”双驱动,打造高端品牌.pdf

    报告标题《***-中信证券-火星人-300894-投资价值分析报告:“线上+线下”双驱动,打造高端品牌》表明了研究对象为火星人公司,股票代码为300894,分析内容涉及该公司的投资价值。报告由中信证券研究部发布,主要分析...

    20210325-中信建投-火星人-300894-集成灶线上冠军,赛道、营销、渠道共驱成长.pdf

    尤其是火星人(股票代码:300894),作为该领域线上销售的佼佼者,火星人展现了非凡的成长动能与市场竞争力。根据中信建投的分析报告,火星人不仅仅是集成灶线上冠军,更在赛道、营销、渠道三方面共同推动着企业的...

    火星人敏捷开发手册 pdf.rar

    火星人敏捷开发手册,pdf格式,编写初衷有两个:1. 希望每次培训课前,大家已经对基本概念有所了解,而不是从头听,这样有限的时间就可以用来解决真正的“敏捷如何应用”的问题而不是“敏捷是什么”的问题。花钱去听...

    20210312-申万宏源-火星人-300894-第三代集成灶领军者,线上线下双轮驱动.pdf

    本文档主要讨论的是火星人公司(股票代码300894)及其在集成灶市场中的地位、战略和前景。火星人是一家专注于第三代集成灶的生产和销售的企业,被定位为该领域的领军者。文件中还详细介绍了火星人的线上线下双轮驱动...

    火星人:2020年年度报告.PDF

    火星人厨具股份有限公司2020年的年度报告详尽地展示了公司在过去一年的运营状况、财务表现以及未来的发展战略。这份报告不仅是对公司内部管理、财务状况和业绩的全面总结,也是对外界投资者和市场的一份重要信息披露...

    20210611-开源证券-火星人-300894-公司首次覆盖报告:集成灶行业风起,龙头新贵积极进取趋势向好.pdf

    从报告中可以看到,集成灶企业火星人(股票代码:300894)作为集成灶行业的龙头新贵,凭借其在产品、渠道、品牌和供应链上的优势,有望持续受益于市场规模的扩大。 火星人公司通过不断的技术研发和创新,形成了以...

    铁将军火星人8958汽车防盗报警器说明书及安装图

    铁将军火星人8958汽车防盗报警器说明书及安装图

    火星人敏捷开发手册 2011-08-18

    ### 火星人敏捷开发手册 2011-08-18 知识点解析 #### 一、Scrum概览 **Scrum**是一种敏捷开发框架,它结合了计划性和灵活性,旨在提高软件开发团队的效率。其名称来源于橄榄球中的“带球过人”动作,意味着在明确...

    火星人敏捷开发手册 2012-06-30.pdf

    ### 敏捷开发与Scrum方法论 #### Scrum概览 Scrum作为一种敏捷开发框架,旨在通过迭代式和增量式的方式实现项目管理和产品开发。...希望这份火星人敏捷开发手册能够帮助读者更好地理解和应用敏捷开发的原则和实践。

Global site tag (gtag.js) - Google Analytics