很强的图片展示效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>5</title>
<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;
}
#box {
position: absolute;
background: #111;
border: gray solid 1px;
visibility: hidden;
}
#screen {
position: absolute;
left: 0px;
width: 100%;
top: 10%;
height: 80%;
background: #000;
border: gray solid 1px;
}
#box img{
position: absolute;
border: gray solid 1px;
cursor: pointer;
}
#box span {
position: absolute;
color: #ccc;
font-family: verdana;
font-size: 12px;
width: 200px;
}
#box a {
text-decoration: none;
color:#ff8000;
}
#box a:hover {
text-decoration: none;
background:#ff8000;
color:#ffffff;
}
#box a:visited {
text-decoration: none;
color:#ff8000;
}
#box a:visited:hover {
text-decoration: none;
background:#ff8000;
color:#ffffff;
}
#lnk {
visibility: hidden;
}
</style>
<script type="text/javascript">
document.onselectstart = new Function("return false");
O = new Array();
box= 0;
img= 0;
txt= 0;
tit= 0;
W = 0;
H = 0;
nI = 0;
sel= 0;
si = 0;
ZOOM = 0;
rImg = 0;
//////////////////
speed = .06; // animation speed
delay = .5; // 1 = no delay
//////////////////
function dText(){
txt.style.textAlign = tit.style.textAlign = (sel<nI/2)?"left":"right";
txt.innerHTML = O.tx;
tit.innerHTML = O.ti;
}
function CObj(n, s, x, tx, ti){
this.n = n;
this.dim= s;
this.tx = tx;
this.ti = ti;
this.is = img;
this.vz = 0;
this.sx = 0;
this.x0 = x;
this.x1 = 0;
this.zo = 0;
this.over = function() {
with(this){
if(n!=sel){
O.dim = 100;
O.dim = ZOOM * 100;
sel = n;
l = 0;
for(k=0; k<nI; k++){
O.x0 = l;
l += O.dim;
}
txt.innerHTML = tit.innerHTML = "";
setTimeout("dText()", 32);
}
}
}
this.anim = function () {
with(this){
vz= speed*(vz+(x1-sx)*delay);
x1 -= vz;
sx= (n==0)?0:O.x0+O.dim;
zo -= (zo-dim)*speed;
l = (x1*si)+6*(n+1);
w = zo*si;
is.style.left = Math.round(l)+'px';
is.style.top = Math.round((H-w*rImg)*.5)+'px';
is.style.width= Math.round(w)+'px';
is.style.height = Math.round(w*rImg)+'px';
if(sel == n){
if(sel<nI*.5) {
tit.style.left = txt.style.left = Math.round(l+w+6)+'px';
} else {
tit.style.left = txt.style.left = Math.round(l-(nx*.25)-6)+'px';
}
txt.style.top = Math.round(-(w*rImg)*.25)+'px';
tit.style.top = Math.round((w*rImg)*.33)+'px';
}
}
}
}
function run(){
for(j in O)O.anim();
setTimeout("run()", 16);
}
function doResize(){
tit.style.width = Math.round(nx*.25)+'px';
txt.style.width = Math.round(nx*.25)+'px';
tit.style.fontSize = (nx/30)+'px';
txt.style.fontSize = (nx/70)+'px';
with(box.style){
width= Math.round(W)+'px';
height = Math.round(H)+'px';
left = Math.round(nx/2-W/2)+'px';
top = Math.round(ny/2-H/2)+'px';
}
}
function resize(){
nx = scr.offsetWidth;
ny = scr.offsetHeight;
W=nx*90/100;
si = (W-((nI+1)*6))/((ZOOM*100)+((nI-1)*100));
H= (100*si*rImg)+14;
doResize();
}
onresize = resize;
onload = function(){
scr = document.getElementById("screen");
box = document.getElementById("box");
tit = document.getElementById("tit");
txt = document.getElementById("txt");
img = box.getElementsByTagName("img");
Lnk = document.getElementById("lnk").getElementsByTagName("a");
nI= img.length;
ZOOM = nI;
rImg = img.height/img.width;
resize();
s = ZOOM * 100;
x = 0;
tit.innerHTML = img.title;
txt.innerHTML = img.alt;
for(i=0; i<nI; i++) {
var t = img.alt;
if(Lnk.href!="") t+='<br><a href="'+Lnk.href+'">'+Lnk.innerHTML+'</a>';
O = new CObj(i, s, x, t, img.title);
img.alt = "";
img.title = "";
img.onmousedown = new Function("return false;");
img.onmouseover = new Function('O['+i+'].over();');
if(Lnk.href!=""){
/* ==== hyperlink ==== */
img.onclick = new Function('window.open("'+Lnk.href+'","_blank");');
}
x += s;
s = 100;
}
box.style.visibility = "visible";
run();
}
</script>
</head>
<body>
<div id="screen">
<div id="box"">
<img src="http://preview.zcool.com.cn/code/js/04/5/newborn.jpg" title="explain" alt="They explained a little about what they were doing.">
<img src="http://preview.zcool.com.cn/code/js/04/5/majesty.jpg" title="strain" alt="I hoped I wouldn′t crack under the strain.">
<img src="http://preview.zcool.com.cn/code/js/04/5/whitemagic.jpg" title="retain" alt="Clearly they were ready to do almost anything to retain their position.">
<img src="http://preview.zcool.com.cn/code/js/04/5/gazebo2k3.jpg" title="mundane" alt="I observed the face of power at its most mundane.">
<img src="http://preview.zcool.com.cn/code/js/04/5/pyre.jpg" title="inhumane" alt="But they couldn′t hide the very worst of their inhumane undertakings from the people.">
<img src="http://preview.zcool.com.cn/code/js/04/5/singularity.jpg" title="disdain" alt="They showed their utter, complete disdain for justice.">
<img src="http://preview.zcool.com.cn/code/js/04/5/spellcraft.jpg" title="never again" alt="Never more. Never again.">
<span id="txt"></span>
<span id="tit"></span>
<span id="lnk">
<a href="http://www.dhteumeuleu.com">www.dhteumeuleu.com</a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</span>
</div>
</div>
<!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 -->
<span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;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;left:0px;top:0px;font-size:1px;width:0px;height:10px;background:#FFFFFF"></span></span></span>
<script>m00=document.getElementById("box").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00.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>
<!-- end of images_loading_bar code -->
</body>
</html>
页:
[1]
