图片特效之带标题与文字介绍的图片展示效果

减小字体

增大字体作者：佚名来源：本站整理发布时间：2010-12-05 12:45:32

带图片标题与介绍的图片展示效果

源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>翔宇亭网页特效 - 图片特效：带文字介绍与标题的图片展示效果-网页特效-图片特效|www.biye5u.com|</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[sel].tx;
tit.innerHTML = O[sel].ti;
}

function run(){
for(j in O)O[j].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[0].height/img[0].width;
resize();
s = ZOOM * 100;
x = 0;
tit.innerHTML = img[0].title;
txt.innerHTML = img[0].alt;
for(i=0; i<nI; i++) {
  var t = img[i].alt;
  if(Lnk[i].href!="") t+='<br><a href="'+Lnk[i].href+'">'+Lnk[i].innerHTML+'</a>';
  O[i] = new CObj(i, s, x, t, img[i].title);
  img[i].alt = "";
  img[i].title = "";
  img[i].onmousedown = new Function("return false;");
  img[i].onmouseover = new Function('O['+i+'].over();');
  if(Lnk[i].href!=""){
   /* ==== hyperlink ==== */
   img[i].onclick = new Function('window.open("'+Lnk[i].href+'","_blank");');
  }
  x += s;
  s = 100;
}
box.style.visibility = "visible";
run();
}
</script>
</head>

<body>

<div id="screen">
<div id="box">
  <img src="tpzs/08081201001.jpg" title="翔宇亭愿与您携手共进" alt="翔宇亭IT乐园愿携手共同促进IT知识的传播">
  <img src="tpzs/08081201002.jpg" title="IT事业必强" alt="我们希望IT事业在中国做大做强.">
  <img src="tpzs/08081201003.jpg" title="中国IT" alt="让中国的IT事业响彻世界.">
  <img src="tpzs/08081201004.jpg" title="来翔宇亭找您想要的" alt="学电脑，找乐子，来翔宇亭乐园.">
  <img src="tpzs/08081201005.jpg" title="有疑问，来翔宇亭看看" alt="有疑问，来biye5u.com找答案.">
  <img src="tpzs/08081201006.jpg" title="谢谢支持" alt="网站的发展壮大离不开各位网友的青睐与关怀.">
  <img src="tpzs/08081201008.jpg" title="never again" alt="Never more. Never again.">
  <span id="txt"></span><span id="tit"></span><span id="lnk">
  <a href="http://www.biye5u.com">www.biye5u.com</a> <a></a><a>
  </a><a></a><a></a><a></a><a></a></span></div>
</div>

<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()