送上一个js版的三维展厅! 你会很喜欢的!!(页 1) - 前台制作与脚本专栏 - 经典论坛网页-网站-制作-设计-编程

sunshijiu 发表于 2008-8-5 14:08

送上一个js版的三维展厅! 你会很喜欢的!!

多用鼠标点点.会有更多的发现哟!

[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>mandatory upgrade - interactive DHTML</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #111;
width: 100%;
height: 100%;
cursor: default;
}
#screen {
position:absolute;
left: 0%;
top: 10%;
width: 100%;
height: 80%;
background: #000;
overflow: hidden;
}
#screen img {
position: absolute;
visibility: hidden;
left: -10000px;
filter: alpha(opacity=100);
}
#screen div {
position: absolute;
top: -10000px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
text-align: center;
filter: alpha(opacity=100);
color: #FFF;
}
#screen .texturl {
color: #FF8000;
}
</style>

<script type="text/javascript">
/*

*/

var i3D = function() {
/* ==== private variables and methods ==== */
var O = new Array(100);
var N = 0;
var scr = false;
var xm  = 0;
var ym  = 0;
var cx  = 0;
var cy  = -2000;
var cz  = 0;
var zm  = 0;
var cr  = 0;
var nx  = 0;
var ny  = 0;
var nw  = 0;
var nh  = 0;
var cg  = false;
var mo  = false;
var path, FL, FS, Z, omob, hlb;
/* ===== crossbrowsers events ==== */
function addEvent (o, e, f) {
var r = false;
if (window.addEventListener) { o.addEventListener(e, f, false); r = true; }
else if (window.attachEvent) { r = o.attachEvent('on' + e, f); }
return r;
}
/* ===== append HTML Element ==== */
function Append (tag, att, css) {
var object = document.createElement(tag);
for( var i in att) object[i] = att[i];
for( var i in css) object.style[i] = css[i];
this.appendChild(object);
return object;
}
/* ===== window resize ==== */
function resize () {
var o = scr;
for (nx = 0, ny = 0; o != null; o = o.offsetParent) {
nx += o.offsetLeft;
ny += o.offsetTop;
}
nw = scr.offsetWidth;
nh = scr.offsetHeight;
}
/* ==== cache xbrowser opacity ==== */
function initOpacity (o) {
if (o.filters && o.filters.alpha) {
o.alpha = o.filters.alpha;
o.opacity = function (alpha) { this.alpha.opacity = Math.round(alpha); }
} else {
o.alpha = o.style;
o.opacity = function (alpha) { this.alpha.opacity = alpha / 100; }
}
}
/* ==== Image3D Constructor ==== */
function Image3D (param) {
var options = param[4] || {};
/* ---- image Element ---- */
this.img = scr.append('img', {
'src' : path + param[0],
'onclick' : this.click,
'onmouseover' : this.mover,
'parent' : this
}
);
this.loaded = false;
this.X    = param[1];
this.Y    = -param[2];
this.Z    = param[3];
this.SX    = options['zx'] || 1;
this.SY    = options['zy'] || this.SX;
this.xb    = 0;
this.yb    = 0;
this.zb    = 0;
this.ab    = 0;
this.w2D = 0;
this.h2D = 0;
this.x2D = 0;
this.y2D = 0;
this.r    = 0;
/* ---- link ---- */
this.url = options['url'] || false;
var txt  = options['txt'] || '';
if (this.url) {
txt += '<br><span class="texturl">'
+ this.url.replace('http://','')
+ '</span>';
this.img.style.cursor = 'pointer';
}
this.icss = this.img.style;
initOpacity(this.img);
/* ---- text element ---- */
if (txt) {
this.txt = scr.append('div', {
'innerHTML' : txt,
'onclick' : this.click,
'parent' : this
},
{'width' : '1000px'}
);
this.tp = -10000;
this.tf = true;
this.tcss = this.txt.style;
initOpacity(this.txt);
}
O[N++] = this;
}
/* ==== prototype images functions ==== */
Image3D.prototype = {
/* ---- hide non moving images ---- */
hide : function () {
if (this.visible) {
this.visible = false;
this.img.style.width = '0px';
this.tp = -10000;
}
},
/* ---- hide text ---- */
txthide : function () {
if (this.txtvisible) {
this.txtvisible = false;
this.txt.style.top = '-10000px';
this.tp = -10000;
this.tf = true;
}
},
/* ---- images onmouseover ---- */
mover : function () {
var that = this.parent;
/* ---- hover ---- */
if (mo != this) {
if (mo) mo.style.border = "";
mo = this;
this.style.border = that.url ? hlb : omob;
}
/* ---- start animation text ---- */
if (that.tf && Math.abs(zm - cz) < 50) {
that.tp = 0;
that.tf = false;
that.tcss.fontSize = (that.r * nh / FS) + 'px'
}
return false;
},
/* ---- images onclick ---- */
click : function() {
var that = this.parent;
if (that.url) {
/* ---- jump to hyperlink ---- */
window.location.href = that.url;
}
/* ---- go to image ---- */
zm = that.Z + 5;
cg = true;
return false;
},
/* ==== main rendering function ==== */
display : function () {
if (this.loaded) {
/* ---- 3D coordinates ---- */
var x = this.X - cx;
var y = this.Y - cy;
var z = this.Z - cz;
/* ---- animate text ---- */
if(this.tp > -200) {
this.txtvisible = true;
this.tp       -= 2;
this.tcss.left = Math.round(this.x2D + this.w2D * .5 - 500) + 'px';
this.tcss.top = (this.y2D + this.tp + this.h2D * .5) + 'px';
this.tcss.zIndex = Math.round(10000 - z);
this.txt.opacity(200 + this.tp);
} else this.txthide();
/* ---- image visible ---- */
if (z > 0) {
/* ---- 3D to 2D transform ---- */
this.r = FL / (FL + (z * Z));
this.w2D = this.W * this.r * Z * this.SX;
this.h2D = this.H * this.r * Z * this.SY;
this.x2D = Math.floor((nw * .5) + (x * this.r * Z) - (this.w2D * .5));
this.y2D = Math.floor((nh * .5) + (y * this.r * Z) - this.h2D);
/* ---- image in screen ---- */
if (this.x2D + this.w2D > 0 && this.x2D < nw) {
this.visible = true;
/* ---- image is moving ---- */
if (this.x2D != this.xb || this.y2D != this.yb || z != this.zb) {
this.xb = this.x2D;
this.yb = this.y2D;
this.zb = z;
/* ---- html rendering ---- */
this.icss.left = this.x2D + 'px';
this.icss.top = this.y2D + 'px';
this.icss.width  = Math.ceil(this.w2D)  + 'px';
this.icss.height = Math.ceil(this.h2D)  + 'px';
this.icss.zIndex = Math.round(10000 - z);
/* ---- fade in/out ---- */
var a = Math.max(0, Math.min(100, z));
if (a != this.ab) {
this.ab = a;
this.img.opacity(a);
}
}
} else this.hide();
} else this.hide();
} else {
/* ==== image onload ==== */
if (this.img.complete && this.img.width) {
/* ---- get size image ---- */
this.W    = this.img.width;
this.H    = this.img.height;
this.loaded = true;
this.img.style.visibility = 'visible';
}
}
}
}
/* ==== public methods ==== */
return {
/* ---- initialize script ---- */
init : function (container, imagepath, focalLength, zoom, fontSize, onmouseover_border, hyperlink_border, structure) {
/* ---- container ---- */
scr = document.getElementById(container);
scr.append = Append;
if (!scr) return false;
/* ---- init ---- */
resize();
path = imagepath;
FL = focalLength;
FS = fontSize;
Z = zoom;
omob = onmouseover_border;
hlb  = hyperlink_border;
xm = nx - (document.body.offsetWidth) + nw;
ym = -ny - nh * .5;
/* ---- camera xy position ---- */
addEvent(window.document, 'mousemove', function(e) {
e = e || window.event;
xm = nx - (e.clientX * 2) + nw;
ym = -ny + (e.clientY * 2) - nh * 2;
return false;
});
/* ---- image onclick ---- */
addEvent(scr, 'click', function() {
if (!cg) zm = 0;
cg = false;
return false;
});
/* ---- window resize ---- */
addEvent(window, 'resize', resize);
/* ---- mouse wheel - camera z position ---- */
if (window.addEventListener) scr.addEventListener('DOMMouseScroll', function(e) {
zm += (e.detail * 40);
return false;
}, false);
scr.onmousewheel = function () {
zm += (-event.wheelDelta);
return false;
}
/* ---- create objects ---- */
for (var i = 0, n = structure.length; i < n; i++)  {
var s = structure[i];
var options = s[4];
/* ---- repeat ---- */
var r = options ? options['repeat'] : false;
if (r) {
for (var j = 0, m = r[1]; j < m; j++) {
var ok = new Image3D(s);
s[r[0]] += r[2];
}
}  else var ok = new Image3D(s);
}
/* ---- launch script ---- */
setInterval(i3D.run, 16);
},
/* ---- main loop ---- */
run : function () {
/* ---- camera ease ---- */
cx -= Math.round((xm + cx) * .1);
cy += Math.round((ym - cy) * .1);
cz += Math.round((zm - cz) * .1);
/* ---- display loop ---- */
var i = N;
while (i--) O[i].display();
}
}
}();

/* ==== global onload ==== */
onload = function () {
/* ---- build structure ----
i3D.init(container, path, focalLength, globalZoom, fontSize, onmouseover_border, hyperlink_border
[image, x,y,z, {options}], ...
);
options { 'zx':zoom x, 'xy': zoom y, 'url':hyperlink, 'txt':text
'repeat':[axis(1,2,3), number, increment]
}
*/
i3D.init("screen", "http://www.dhteumeuleu.com/images/", 300, 1, 12, '#666 solid 1px', '#fff dotted 1px', [
['bim.jpg', 0,20,1020, {'zx':9, 'zy':.5}],
['r4.gif', -1200,0,1000, {'txt':'duplicated'}],
['r29.gif', 700,0,1000, {'txt':'mechanomorphism'}],
['r15a.gif', -1100,0,900, {'txt':'amniocentetic'}],
['r59.gif', 600,0,500, {'txt':'asphericity'}],
['r39a.gif', -1000,0,200, {'txt':'onomatopoeia'}],
['r65.gif', -400,0,150, {'txt':'therianthrope'}],
['r39c.gif', 400,0,150, {'txt':'arboretum'}],
['r14.gif', 1200,0,250, {'txt':'heliotrope'}],
['r13.gif', 0,0,900, {'txt':'', 'url':'http://www.dhteumeuleu.com'}],
['r74.gif', -400,0,950, {'txt':'santorum'}],
['r74.gif', 400,0,950, {'txt':'taphephobia'}],
['r58c.gif', 700,0,800],
['r58c.gif', 1100,0,800],
['r46a.gif', 900,220,800, {'txt':'philatelical'}],
['r58b.gif', 900,-20,740, {'txt':'salmagundi'}],
['r8.gif', -600,0,800, {'txt':'diverticulectomy'}],
['r67.gif', -750,0,900, {'zx':0.8, 'txt':'cerebrotonic'}],
['r69.gif', -900,0,750, {'txt':'compersion'}],
['r69.gif', -300,0,750, {'txt':'epicaricacy'}],
['r72.gif', -600,0,600],
['r72.gif', -620,0,580, {'txt':'endomorphy'}],
['r22.gif', 0,0,600, {'txt':'rhamphorhynchus'}],
['r24.gif', 0,0,400, {'txt':'verisimilitudinous'}],
['r62.gif', 0,700,800, {'repeat':[3, 2, -400]}],
['r60.jpg', 0,900,1000, {'zx':3, 'zy':1, 'repeat':[3, 3, -400]}],
['r70.gif', 1100,0,600, {'txt':'lollygagger'}],
['r5.gif', -1200,300,600, {'txt':'homophilian'}],
['r6.gif', 1200,300,600, {'txt':'bysectamy'}],
['r54.gif', 0,0,100, {'txt':'iterator'}],
['r64.gif', 500,300,100],
['r38.gif', -900,0,350, {'txt':'protease'}],
['r51.gif', -600,0,400, {'txt':'gallipot'}],
['r52.gif', -300,0,250, {'txt':'temerarious'}],
['r50a.gif', -550,0,300, {'txt':'encyclopedia'}],
['r41.gif', -400,200,1000, {'txt':'paranoid'}],
['r43.gif', 300,400,1000, {'txt':'emboldened'}],
['r48.gif', 900,0,300, {'txt':'somnambulist'}],
['r58b.gif', 900,-20,250, {'txt':'miraculous'}],
['r63.gif', -1000,0,300, {'txt':'sufficiency'}],
['r63.gif', 650,0,320, {'txt':'biometric'}],
['r63.gif', 1000,0,980, {'txt':'baglady'}],
['Bush2.gif', -300,0,-200, {'repeat':[3, 3, -400]}],
['Bush2.gif', 300,0,-200, {'repeat':[3, 3, -400]}]
]);
}
</script>
</head>

<body>

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

</body>
</html>[/html]

[[i] 本帖最后由 sunshijiu 于 2008-8-5 14:18 编辑 [/i]]

quweiie 发表于 2008-8-5 14:11

beautiful

very 漂亮,javascript is very strong from this.

WellFrog 发表于 2008-8-5 14:11

不错，就是晃动的头晕~！

liuyunfly 发表于 2008-8-5 14:12

超酷！

jsw0528 发表于 2008-8-5 14:21

可是我不知道能用在那

liaoruilu 发表于 2008-8-5 14:47

很棒呢!

fishbar 发表于 2008-8-28 11:41

有点假，呵呵，透视感不好

oncean 发表于 2008-8-28 11:50

很酷很强大！
留个名~随时翻阅！

mypda07 发表于 2008-8-28 12:48

晕,已发过一次了吧

bwv6338 发表于 2008-8-28 17:08

不错，就是看得人头晕晕的。

kanshangren 发表于 2008-8-28 17:16

不错，图片蛮漂亮的，可以收集下来用用，呵呵

shanlan1 发表于 2008-8-28 17:23

太强了，看的眼晕

voilet 发表于 2008-8-28 17:33

技术很强大啊，可是3D效果不太好~~~~~~~~~

importance2008 发表于 2008-8-28 17:40

我感觉很强大，近期的我是做不出来这样的效果的，学习ing...!

hanscowboy 发表于 2008-8-28 21:18

技术含量高，但不是很实用。

526832297 发表于 2008-8-28 21:21

发晕

forcs 发表于 2008-8-29 02:01

可以解析一下不。。。。。。。。。。。。

kamiro 发表于 2008-8-29 11:23

。。。这个太牛了，收了

经典论坛的高手果然好多。。

dsqwei1 发表于 2008-8-29 11:32

不知道是谁做的。好庞大、深奥的工程..

duluohua 发表于 2008-8-29 11:51

很牛~ 完全用js蛮难实现的吧..

simaopig 发表于 2008-8-29 15:39

这个很好很强大，貌似有点黄有点暴力？

4pdesign 发表于 2008-8-29 23:15

创意不错。:D

lhf8810 发表于 2008-8-29 23:35

晃得实在有点晕，:)

judder05 发表于 2008-8-30 08:26

很酷很强大！

页: [1]

经典论坛's Archiver

送上一个js版的 三维展厅! 你会很喜欢的!!

beautiful

送上一个js版的三维展厅! 你会很喜欢的!!