老外一个很酷的图片展示效果(页 1) - 草根网站建设运营 - 草根站长论坛 --我们用心打造中国一流的站长论坛!

daojian_2005 发表于 2008-8-17 14:29

老外一个很酷的图片展示效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[url=http://www.w3.org/TR/html4/strict.dtd]http://www.w3.org/TR/html4/strict.dtd[/url]">
<html>'w%_#r z7p~dL&v6vN
<head> QXX#A.a*mo
<title>autumn II - interactive DHTML</title>hp g$\{$F0PQ
<meta name="Author" content="Gerard Ferrandez">
<meta http-equiv="imagetoolbar" content="no">3rZ&K2\2p|'u
<style type="text/css"> eB/@+Xc7|O(p a
html {_e+l5w%Adb+xxNy
  overflow: hidden;
}-fJ7}dg3`vHs pC
body {Q4R+T3R!l^?
  position: absolute;
  margin: 0px; z8QX'}h {6d
  padding: 0px;
  background: #111;
  width: 100%;
  height: 100%;+T6D\{[*OHQV
}H o!B Lxu7bO9Q1g
#screen {/y5c w1WW0n,w{
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80%;
  height: 80%;
  background: #000;TECts
}
#screen img { 5e0J/c!eV7C,M6T
  position: absolute;2URLK`P6U2Z)C
  cursor: pointer;x+Jih;\^
  visibility: hidden;
  width: 0px;
  height: 0px;Di\3|Kv6hqP)\
}[%_7Fjaq \R
#screen .tvover {]%}/]4A\yaw e
  border: solid #876;
  opacity: 1;
  filter: alpha(opacity=100);
}
#screen .tvout {
  border: solid #fff;S:~!F/k,j#?1b
  opacity: 0.7;
}
#bankImages {
  display: none;
}_Tp7_6["l3I)tkm
</style>
<script type="text/javascript">L9lt7g b]
// =============================================================
//                ===== photo 3D =====
// script written by Gerard Ferrandez - October 21th, 20074{ }vM6Y.Q8@
// [url=http://www.dhteumeuleu.com]http://www.dhteumeuleu.com[/url]4P-qRz8P1G7m
// =============================================================D/e;gVy5KsJ
/* ==== library ==== */(Q4PB/Ophq@Th$k
var Library = {};qO{"m2idz
Library.ease = function () {
this.target = 0;F!HSdm
this.position = 0;
this.move = function (target, speed)n.~*x ]![7m*bv
{KipC#h4c8b
  this.position += (target - this.position) * speed;
};D.G(Z b'^-H$k
}
var tv = {
/* ==== variables ==== */
O : [],}k*o9B\5raI.O
screen : {},
grid : {@"Y?hU!Vnnf4u
  size    : 4,  // 4x4 grid
  borderSize : 6,  // borders size2GMKD.g\!l%D![
  zoomed    : falsesE,m'LOw
},2x:v9| Tu[
angle : {
  x : new Library.ease(), S'hd`9Vh0h,R5}p
  y : new Library.ease()5u*~^G,hc
}, KaLxy`k1d'K
camera : {3PV(D5wOW/ZK o)M
  x : new Library.ease(),]e'l"\C#O(a2~
  y : new Library.ease(),
  zoom : new Library.ease(),
  focalLength : 750 // camera Focal Length/j-XS*E kla5p,@&o
},7rzW$zM5Mt

/* ==== init script ==== */)Z*~pN,a)z;_l
init : function ()m.eR}!^
{WI5Q8oL^6F6~-F
  this.screen.obj = document.getElementById('screen');BA#|FDO/c$]x9L
  var img = document.getElementById('bankImages').getElementsByTagName('img');sPt0J3Ib
  this.screen.obj.onselectstart = function () { return false; }pai {.HU
  this.screen.obj.ondrag       = function () { return false; }g\8}l%k,Im
  /* ==== create images grid ==== */\(k"oZ9f
  var ni = 0;^T(vnG)`3R2K
  var n = (tv.grid.size / 2) - .5;
  for (var y = -n; y <= n; y++)_0k&k'K$I0S&_2^6q
  {*|8U#HA{)Wb1c
for (var x = -n; x <= n; x++)\zEo"g4j1w
{
/* ==== create HTML image element ==== */
var o = document.createElement('img');
var i = img[(ni++) % img.length];0W4t.Pu Kw@ L^]
o.className = 'tvout';
o.src = i.src;
tv.screen.obj.appendChild(o);
/* ==== 3D coordinates ==== */"\f:V3m&J,?BG}ll
o.point3D = {5J*]Hh)R4W2E,Zs;B
   x  : x,
   y  : y,] gfsB.vH'r
   z  : new Library.ease()
};Dm+N-f6~`y~#A
/* ==== push object ==== */P,S\U3?2pna
o.point2D = {};
o.ratioImage = 1;
tv.O.push(o);4K$[/Y:sc
/* ==== on mouse over event ==== */
o.onmouseover = function ()8JEj,eMf
{+i s'R ?q;[
   if (!tv.grid.zoomed)6i1zB#{G.`#s,{!r
   {
   if (tv.o)l\WCU
   { f#rYm%\-`Dcp
   /* ==== mouse out ==== */.J.yj;Qm
   tv.o.point3D.z.target = 0;6I4r,U8s @T#]!B
   tv.o.className = 'tvout';
   }uZ^AC_xTuT
   /* ==== mouse over ==== */
   this.className = 'tvover';
   this.point3D.z.target = -.5;
   tv.o = this;Q-zZ\.WRIa
   }
}B/yr1Hoc
/* ==== on click event ==== */K:i9T8aOU$pmhf
o.onclick = function ()4N"D }Ia4oK_
{
   if (!tv.grid.zoomed)cc9Q6B%]aFrm&M
   {
   /* ==== zoom in ==== */
   tv.camera.x.target = this.point3D.x;
   tv.camera.y.target = this.point3D.y;
   tv.camera.zoom.target = tv.screen.w * 1.25;b2dYW'w? `
   tv.grid.zoomed = this;J7V7cD*u0V
   } else {;q;a9Yv-d[c0^0D
   if (this == tv.grid.zoomed){
   /* ==== zoom out ==== */
   tv.camera.x.target = 0;
   tv.camera.y.target = 0;!]'r@T_5Fx;P-UH\
   tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
   tv.grid.zoomed = false; ]LqM+DT.h@&^(s TA'P/P
   } `Z'G#\'L/Kk4\G'`
   }{ ? pnCq.a8|p
}
/* ==== 3D transform function ==== */
o.calc = function ()V5[,q3^3U9N(zN:T(_
{
   /* ==== ease mouseover ==== */
   this.point3D.z.move(this.point3D.z.target, .5);
   /* ==== assign 3D coords ==== */0NJ w_s"waH.k
   var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;
   var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;
   var z = this.point3D.z.position * tv.camera.zoom.position;}K&tZ6Ch7L
   /* ==== perform rotations ==== */`1yW(eAWqf9j-`
   var xy = tv.angle.cx * y  - tv.angle.sx * z;
   var xz = tv.angle.sx * y  + tv.angle.cx * z;id{ TL8Z
   var yz = tv.angle.cy * xz - tv.angle.sy * x;
   var yx = tv.angle.sy * xz + tv.angle.cy * x;*uA2Z8})xxI
   /* ==== 2D transformation ==== */2w e7v#xX#Z
   this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);[a:R7g2u+rf+d
   this.point2D.x = yx * this.point2D.scale;
   this.point2D.y = xy * this.point2D.scale;
   this.point2D.w = Math.round(
                     Math.max(I`-Q`-Emqu"eL~
                        0, 0C g_8Z8n7~
                        this.point2D.scale * tv.camera.zoom.position * .8
                     )
                  );;{~"J*kNYW8\
   /* ==== image size ratio ==== */
   if (this.ratioImage > 1)
   this.point2D.h = Math.round(this.point2D.w / this.ratioImage);
   elsegYa7i/N^
   {
   this.point2D.h = this.point2D.w;)ptp g4o7E
   this.point2D.w = Math.round(this.point2D.h * this.ratioImage);
   }
}
/* ==== rendering ==== */(Sv4H;Um4Z2ZkG]J
o.draw = function ()7Z:YQz7q
{
   if (this.complete)%?*J fz|? k
   {
   /* ==== paranoid image load ==== */
   if (!this.loaded)
   {
   if (!this.img)5r#{D9N |iCtl+~
   {:^S+~Waw np,m*y
      /* ==== create internal image ==== */%h%PxN$dL
      this.img = new Image();5r/v\T?!|
      this.img.src = this.src;
   }/u%z} G?
   if (this.img.complete)$n}h/br
   {
      /* ==== get width / height ratio ==== */f%J6Z])E6U2z$e:t
      this.style.visibility = 'visible';
      this.ratioImage = this.img.width / this.img.height;
      this.loaded = true;%K-TGvsSm
      this.img = false;
   }
   }
   /* ==== HTML rendering ==== */,[+a7Mq[,S
   this.style.left = Math.round({6?(Bj4eZ
                        this.point2D.x * this.point2D.scale +
                        tv.screen.w - this.point2D.w * .58n A0O d4m.g7W2J
                     ) + 'px';1yk%Z9PO
   this.style.top  = Math.round(x P*s ]&k-Y3d#M+gV
                        this.point2D.y * this.point2D.scale + ,H_K7m VrM
                        tv.screen.h - this.point2D.h * .5-H&jq1kULE
                     ) + 'px';
   this.style.width  = this.point2D.w + 'px';
   this.style.height = this.point2D.h + 'px';
   this.style.borderWidth = Math.round(/ht]P1k1]K#q
                              Math.max(
                                 this.point2D.w, &u*y%Q3Q$|~@
                                 this.point2D.h)~&Q{7T&A cv!~ \
                              ) * tv.grid.borderSize * .01
                           ) + 'px'; [%@Z5P7ES&X
   this.style.zIndex = Math.floor(this.point2D.scale * 100);vLf7nsx$f6X
   }
}{ Q.vu7GD)R
}
  }
  /* ==== start script ==== */-d@ba xd6b
  tv.resize();5\JV]!c
  mouse.y = tv.screen.y + tv.screen.h;,Uv:rbP2nA5K
  mouse.x = tv.screen.x + tv.screen.w;rrU._:B])k
  tv.run();
},

/* ==== resize window ==== */
resize : function ()
{
  var o = tv.screen.obj;[+P S3y p!O
  tv.screen.w = o.offsetWidth / 2;ekj7cz;v
  tv.screen.h = o.offsetHeight / 2;
  tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
  for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent)9Khh3?&P
  {
tv.screen.x += o.offsetLeft;r@seSmYvp:bU
tv.screen.y += o.offsetTop;ptZ`jX/L
  } q7Lu^ Z
},4Pi&|-k.N&X#w
/* ==== main loop ==== */;k;_P&fGT
run : function ()"y9O8D#f\8w:s%UFo
{o8]/HbW9ww
  /* ==== motion ease ==== */
  tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);B5UpcQ6y:u ngf~.G\
  tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);
  tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);
  tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);
  tv.camera.zoom.move(tv.camera.zoom.target, .05);0X#C]/|]2N
  /* ==== 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);D:A:T+B`*d
  tv.angle.sy = Math.sin(tv.angle.y.position);
  /* ==== loop through all images ==== */
  for (var i = 0, o; o = tv.O[i]; i++)x-ku:W(qHt
  {
o.calc();
o.draw();
  }"~3~e'Gah
  /* ==== loop ==== */
  setTimeout(tv.run, 32);1Hga?|0_B&j
}\8RQ$hB6~]
}eb$u)xns/u%Y
/* ==== global mouse position ==== */^n8d&s!~cMUR
var mouse = {O8y9w*Y5N-y
x : 0,
y : 04z5G}%S#_k
}
document.onmousemove = function(e)w^8dci,M [Ea
{
if (window.event) e = window.event;
mouse.x = e.clientX;$eID!GK4C
mouse.y = e.clientY;/pJh)smj*Le
return false;
}n g;mU%E7gV0mg7~v
</script> R:AbR3D
</head>
<body>
<div id="screen"></div>+SYY,G?n;RUd
<div id="bankImages">
<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wi23.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wi23.jpg[/url]">
<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wt06.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wt06.jpg[/url]">
<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wt47.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wt47.jpg[/url]">3fm ~r:Ur-g"PH
<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wt16.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wt16.jpg[/url]">
0q@3kC-t(I7@
<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wt43.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wt43.jpg[/url]">5odF t6n
<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wt19.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wt19.jpg[/url]">
<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wt27.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wt27.jpg[/url]">\.o:yd%R'YHz
<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wt46.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wt46.jpg[/url]">

<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wt14.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wt14.jpg[/url]">;zi"i(Pb!g
<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wt21.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wt21.jpg[/url]">
<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wt35.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wt35.jpg[/url]">,B1C,{ ~3W],LR
<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wt48.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wt48.jpg[/url]">+i&PI C/e/Z
Ub/c/kVM
<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wt55.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wt55.jpg[/url]">
<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wt40.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wt40.jpg[/url]">
<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wt53.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wt53.jpg[/url]">?:X5D8[+CG
<img alt="" src="[url=http://www.webkey.cn/demo/docs/photo3d/images/wt25.jpg]http://www.webkey.cn/demo/docs/photo3d/images/wt25.jpg[/url]">

</div>
<script type="text/javascript">
/* ==== start script ==== */
onresize = tv.resize;
tv.init();
</script>Du/c!m5i~ uw3J
</body>
</html>
[/i]

dayu898 发表于 2008-8-22 12:15

<head><style>* ?8 b' u5 M7 A: U. }3 N4 mlKX7AX&q1WfQHy
5 h- F! ~6 U$ p/ h O'F*~v5P \(]
</style>6 P' ?6 p6 b" f3 t# o0 p% ?
</head>
5 O4 U% e; C) H) Z" J  C  r2 z<body><div id="tickertape">
. I6 D1 q% Q; H3 O<div id="subtickertape" class="subtickertapefont">初始化...</div># h; o8 i! ^+ B% y9 O* P' n] FN'q-J-\
</div>+ c0 Z6 w" H) Q7 Y' c
<script language="JavaScript1.2">6 \  H& C' f7 `6 j: b, b@)Qb5\\/t"v?
//默认速度4.5秒，自己修改速度快慢。, `9 n/ k- a0 \* d' v0 skI(`$jb$`
var speed=10008 u5 f' @/ q* O3 j/ ?% f( S  k4 F
var news=new Array()9 F, l/ K+ H9 K2 @( j& Q
news[0]="<a href='index1.htm'>1</a>"LXipNI L
' n4 w7 O; O8 y$ D" n# |3 \# Dnews[1]="<a href='index2.htm'>2</a>"5 s3 I, `) T% {- e0 g' J* h2 |!rR6H4`J2R?
news[2]="<a href='index3.htm'>3</a>""xn)r-e+w%`7JC.q
0 Y# @3 L( l. }: G1 A- t, r  Pnews[3]="<a href='index4.htm'>4</a>"(O4Pc YHXoB
* ]; i2 t7 g) Y- N; W7 Xnews[4]="<a href='index5.htm'>5</a>"% }6 T0 i. Y; E7 Umn oX^0|;J FW D
news[5]="<a href='index6.htm'>6</a>"
! M& F5 n* y0 z1 K8 L5 ?: h) onews[6]="<a href='index7.htm'>7</a>"; S6 k+ [8 ~7 a! @9 I4 i$ }
//显示的信息内容可以任意按照格式添加。
+ J6 W+ h! s+ n+ S- h* L1 E' Xi=07 c/ R* l' e1 `/ r3 m
if (document.all)
2 T; z* k1 Z. F1 S4 Q( _( Wtickerobject=document.all.subtickertape.style, G+ C0 _9 j" O; m  Y& u6 P- n-eY"zo,_
else8 }1 n. h! f, ]- f" n7 ?8 H& K9 x3G/Y$F(o!h\/E
tickerobject=document.tickertape.document. `  r$ Z/ v" J8 E) P8 b) F6 d$ F$I e#oC'm3Uo)i'F
function regenerate(){# d$ k$ C9 t4 D(``0Y4b-[YUi?%m
window.location.reload()
7 ?+ N% c: W, J1 ?}]5J{x~1U5?
) n" V; j) c! Zfunction regenerate2(){3 w& Q5 R  l5 W; h`X7R[,s
if (document.layers)0 a/ R1 [7 Y2 E! q/ \3 Hw8cUJ4r!h1\
setTimeout("window.onresize=regenerate",450)
3 A0 H& q# y- T7 q/ t}
* g. q! q9 Q% K. Vfunction update(){'G!F*vL-OL6}
# k4 y+ B( u2 R1 w- D+ S BgFade(0xff,0xff,0xff, 0x00,0x00,0x00,10);: `" E: {5 p: V! A! A' @- @% _& X5 X_Z'CX/q `-I9FuNo
if (document.layers){$H){-U?Ma
* s/ W* B6 a3 Y, Jdocument.tickertape.document.subtickertape.document.write('<span class="subtickertapefont">'+news+'</span>')
$ l; M, {- D3 b2 j3 p4 tdocument.tickertape.document.subtickertape.document.close();c3{1@9PO0G_u%F
! G. |1 j2 e" }/ t  o' \}%a.`D8YuX9k$l
- S) L( p2 J, B' i$ \2 ]0 jelse M) [2 U! s1 N( u. rgPcs*bO4ElOB
document.all.subtickertape.innerHTML=news, G; B- F/ W: r* t
if (i<news.length-1)
  e6 T% ^+ E/ B& Z4 V1 j  ?5 {i++" o/ {* |& j7 s+ k8 d
else# X1 W' ~. o! t1 j6 l
i=0
4 \! M3 f, {4 d6 M* isetTimeout("update()",speed)  {1 Q+ O, D  ?HfrW:D
}%I&[2E*c6nW
3 A( h1 \% x+ j  m' j; l function BgFade(red1, grn1, blu1, red2,
+ F, j3 p- g2 A4 k6 B grn2, blu2, steps) {
! k/ \* t# }  B9 x1 p sred = red1; sgrn = grn1; sblu = blu1; & \) N- y9 D5 H
ered = red2; egrn = grn2; eblu = blu2; )PB"{a$hx
* ?$ |& Y- _- U3 P inc = steps;
" c, Y( K8 \  N  ?7 ]' k8 I* l5 @5 T step = 0; &zL'e.b9^~"\-g
* _/ X/ u6 a7 s( H- t  [$ Y RunFader();/ ~3 u* b, I- K! _+ }+ R! k
}
* y! ], q) P+ b  Q! u( M; _% O/ | function RunFader() {
; ]6 z4 {. l2 s3 ]6 I var epct = step/inc;
7 C( ]' k2 ^+ G var spct = 1 - epct; 3 c- I8 w0 |9 c8 u
if (document.layers)
# L2 K7 M: D3 T, N) p5 k tickerobject.bgColor =. t0 I6 _+ H; a2 x5 B4 P
Math.floor(sred * spct + ered *C-ym0O9G|XO]}0w
' k9 d/ T! {& A( d, a epct)*256*256 +Vc2w/~'j ?9[]$d$k~
. g3 z; ~$ c3 _6 `/ I5 G9 p7 w Math.floor(sgrn * spct + egrn * epct)*256 +E^u)]#^9~-}
: f& Z1 Y8 d+ J  w. s' G' t Math.floor(sblu * spct + eblu * epct); . E4 Y% u& j1 H1 w- h0 ^4 b
elseJ~#eb ^k1y
! B3 ]. \, n8 U" P0 ~8 r tickerobject.backgroundColor=m.|-MZ!M8E{C
% U) l" @0 ~5 Q9 q' p5 y  A' ` Math.floor(sred * spct + ered *) j  c1 [6 v- w) B! ]
epct)*256*256 +. M+ i0 f3 P  `- O2 v
Math.floor(sgrn * spct + egrn * epct)*256 +! T; D2 T( o( n2 P* a% O% Ut(Q3@)L#R1i*u
Math.floor(sblu * spct + eblu * epct); ; R4 p  E- _, L* X& ON8Z){ cA{`
if ( step < inc ) {1g ?#P Q2V
+ n& p! _$ H) K6 Z setTimeout('RunFader()',50); ) }7 L) n9 h: M, p/ Z  i6 W, C&`tZ1Y+]9_ y
}1 c3 x) w  [( h( C4 |, e; p b K!\&{#X
step++;D"WD/J O @
+ R" J' h, S1 z }!E)GC0D,rk"D:l~
: U# S% @# X& J4 L. U, f</script>
8 L2 m9 Z/ ]0 E" H( q$ Z</body>- o* \( w  A6 f,f/m nqH!F
<body><body bgcolor="#000000">

页: [1]

草根站长论坛's Archiver

老外一个很酷的图片展示效果