Code Slide Show ảnh giống motco.be - Code Tạo Gallery 3D không flash - Code slide show 3D

Demo http://www.paulvanroekel.nl/picasa/prometeusdemo/index.html

Làm slide ảnh cho lớp, cho trường chắc cũng đẹp lắm đó ^^

Hơi giống thui he he

thay mấy cái link ảnh thành hình nhá

Code:: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Uhm.vn Slide Show 3D</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #000;
position: absolute;
width: 100%;
height: 100%;
cursor: crosshair;
}
#canvas {
position:absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
}
#canvas img {
position: absolute;
background: #000;
overflow: hidden;
cursor: pointer;
left: 100%;
border-color: #000;
border-style: solid;
border-width: 1px;
-ms-interpolation-mode:nearest-neighbor;
}
#canvas span {
position: absolute;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 0px;
white-space: nowrap;
left: -1000px;
background: #000;
filter: alpha(opacity=90);
opacity: 0.9;
}
</style>
<script type="text/javascript">
// ==================================================
// script realized by Gérard Ferrandez - June 2006
// http://www.dhteumeuleu.com
// ==================================================

id = function(o) { return document.getElementById(o); }
px = function (x) { return ''.concat(Math.round(x), 'px'); }

//////////////////////////////////////////////////////////////////////////////
function resize() { gf.resize(); }
onresize = resize;

document.onmousemove = function(e)
{
if(window.event) e=window.event;
gf.xm = (e.x || e.clientX) - gf.nx - gf.nw * .5;
gf.ym = (e.y || e.clientY) - gf.ny - gf.nh * .5;
}

//////////////////////////////////////////////////////////////////////////////
var gf = {
O : [],
cont : 0,
N : 0,
S : 0,
img : 0,
spa : 0,
xm : 0,
ym : 0,
nx : 0,
ny : 0,
nw : 0,
nh : 0,
cx : 0,
cy : 0,
zoom : 1,
x : 0,
y : 0,
z : -40000,
xt : 0,
yt : 0,
zt : 0,
//////////////////////////////////////////////////////////////////////////////
resize : function ()
{
var o = id('canvas');
gf.nx = o.offsetLeft;
gf.ny = o.offsetTop;
gf.nw = o.offsetWidth;
gf.nh = o.offsetHeight;
gf.zoom = gf.nh / 700;
},

CObj : function (n)
{
this.n = n;
this.x = gf.zoom * Math.random() * gf.nw * 2 - gf.nw;
this.y = gf.zoom * Math.random() * gf.nh * 2 - gf.nh;
this.z = Math.round(n * (10000 / gf.N));
this.w = gf.img[n].width;
this.h = gf.img[n].height;
this.oxt = gf.spa[n];
this.oxs = this.oxt.style;
this.txt = gf.spa[n].innerHTML;
this.oxt.innerHTML = "";
this.obj = gf.img[n];
this.obs = this.obj.style;
this.obj.parent = this;
this.obj.onclick = function() { this.parent.click(); }
this.obj.ondrag = function() { return false; }
this.oxt.style.zIndex = this.obj.style.zIndex = Math.round(1000000 - this.z);
this.F = false;
this.CF = 100;
this.sto = [];

this.anim = function()
{
var f = 700 + this.z - gf.z;
if (f > 0)
{
var d = 1000 / f;
var X = gf.nw * .5 + ((this.x - gf.x - gf.cx) * d);
var Y = gf.nh * .5 + ((this.y - gf.y - gf.cy) * d);
var W = d * this.w * gf.zoom;
var H = d * this.h * gf.zoom;
this.obs.left = px(X - W * .5);
this.obs.top = px(Y - H * .5);
this.obs.width = px(W);
this.obs.height = px(H);
this.oxs.visibility = (this.CF-- > 0 && Math.random() > .9) ? "hidden" : "visible";
this.oxs.left = px(X - W * .5);
this.oxs.top = px(Y + H * .5);
if((gf.zt - gf.z) < 20)
{
if(!this.F)
{
this.F = true;
this.CF = Math.random() * 200;
this.oxs.fontSize = px(1 + d * 20 * gf.zoom);
var T = "";
var tn = this.txt.length;
for(var i = 0; i < tn; i++)
{
T = T.concat(this.txt.charAt(i));
this.sto[i] = setTimeout('gf.O['.concat(n, '].oxt.innerHTML = "', T.concat(" "), '";'), Math.round(f / 4) + 32 * i);
}
}
}
else
{
this.F = false;
this.oxt.innerHTML = "";
}
}
else
{
this.x = gf.zoom * Math.random() * gf.nw * 2 - gf.nw;
this.y = gf.zoom * Math.random() * gf.nh * 2 - gf.nh;
this.z += 10000;
this.oxs.zIndex = this.obs.zIndex = Math.round(1000000 - this.z);
}
}

this.cto = function()
{
var i = this.txt.length;
while (i--) clearTimeout(this.sto[i]);
}

this.click = function()
{
var i = gf.N;
while (i--) gf.O[i].cto();
if(gf.S != this)
{
gf.xt = this.x;
gf.yt = this.y;
gf.zt = this.z;
gf.S = this;
}
else
{
gf.S = 0;
gf.zt += 1600;
}
}
},

init : function ()
{
gf.cx = gf.nw / 2;
gf.cy = gf.nh / 2;
gf.cont = id("canvas");
gf.img = id("canvas").getElementsByTagName("img");
gf.spa = id("canvas").getElementsByTagName("span");
gf.N = gf.img.length;
for (var i = 0; i < gf.N; i++) gf.O[i] = new gf.CObj(i);
gf.run();
gf.O[0].click();
},

run : function ()
{
gf.cx += (gf.xm - gf.cx) * .1;
gf.cy += (gf.ym - gf.cy) * .1;
gf.x += (gf.xt - gf.x) * .05;
gf.y += (gf.yt - gf.y) * .05;
gf.z += (gf.zt - gf.z) * .05;
var i = gf.N;
while (i--) gf.O[i].anim();
setTimeout(gf.run, 16);
}
}

onload = function() {
resize();
gf.init();
}

</script>
</head>

<body>

<div id="canvas">

<img src="http://uhm.vn/uhm.gif"><span>Uhm.vN</span>
<img src="http://uhm.vn/forum/pic/origami.gif"><span>Hình 2 nè</span>
<img src="http://blog.uhm.vn/emo/heoden/4.gif"><span>Con heo ^^</span>
<img src="http://blog.uhm.vn/emo/heoden/5.gif"><span>Con heo blog.uhm.vn</span>
<img src="http://blog.uhm.vn/emo/heoden/6.gif"><span>Con heo blog.uhm.vn</span>
<img src="http://img.photo.zing.vn/file_uploads/gallery/1024x768/2010/04/27/10/22541272338250.jpg"><span>Bé Chù</span>
<img src="http://img.photo.zing.vn/file_uploads/gallery/1024x768/2010/04/27/10/63421272338321.jpg"><span>Bé Chù</span>
<img src="http://www.look.yeah1.com/albums/userpics/13037/ch%C3%B9.JPG"><span>Bé Chù</span>
<img src="http://www.look.yeah1.com/albums/userpics/13037/fhfgg.JPG"><span>Bé Chù</span>
<img src="http://www.look.yeah1.com/albums/userpics/13037/khn.JPG"><span>Bé Chù</span>

</div>

<span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#ccc;background:#000;left:-50px;top:-18px">Loading...</span><span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;font-size:1px;width:0px;height:10px;background:#ccc"></span></span></span>
<script type="text/javascript">m00=document.getElementById("canvas").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script>

</body>
</html>

nếu muốn giới hạn hình ảnh hông to quá, thì dùng đoạn mã này để thêm ảnh

Code:: <img style="z-index: 980698; left: 1034px; top: 658px; width: 114px;
height: 71px;" src="index_files/20090420_img_0724.jpg"><span
style="z-index: 980698; visibility: visible; left: 1034px; top: 729px;
font-size: 8px;">20090420_img_0724.jpg </span>

thay cho

Code:: <img src="http://uhm.vn/uhm.gif"><span>Uhm.vN</span>

» Có mấy pic show kỉ niệm
» Izabel Goulart @ Lenny Bikini Show 1
» Điệp viên không không thấy