站内搜索：

在线手册

javascript教程——特效代码

图片加载完再续个变亮效果
作者：不详   2008-4-6

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
 background:#333;
}
.indexImg {
 BORDER-RIGHT: #ffffff 8px solid; BORDER-TOP: #ffffff 8px solid; BACKGROUND: #000000; FILTER: alpha(opacity=20); BORDER-LEFT: #ffffff 8px solid; CURSOR: url('http://www.86w3.com/images/css/ji.cur'); BORDER-BOTTOM: #ffffff 8px solid; moz-opacity: 0.2; opacity: 0.2
}
-->
</style>
</head>
<body>
<table width="1003" border="0">
  <tr>
    <td><img class="indexImg" src="zhuatu_com_6ef_s.jpg" width="220" height="138" alt="" /></td>
    <td><img class="indexImg" src="zhuatu_com_6ef_s.jpg" width="220" height="138" alt="" /></td>
    <td><img class="indexImg" src="zhuatu_com_6ef_s.jpg" width="220" height="138" alt="" /></td>
  </tr>
  <tr>
    <td><img class="indexImg" src="zhuatu_com_6ef_s.jpg" width="220" height="138" alt="" /></td>
    <td><img class="indexImg" src="zhuatu_com_6ef_s.jpg" width="220" height="138" alt="" /></td>
    <td><img class="indexImg" src="zhuatu_com_6ef_s.jpg" width="220" height="138" alt="" /></td>
  </tr>
  <tr>
    <td><img class="indexImg" src="zhuatu_com_6ef_s.jpg" width="220" height="138" alt="" /></td>
    <td><img class="indexImg" src="zhuatu_com_6ef_s.jpg" width="220" height="138" alt="" /></td>
    <td><img class="indexImg" src="zhuatu_com_6ef_s.jpg" width="220" height="138" alt="" /></td>
  </tr>
</table>
<SCRIPT language="javascript" type="text/javascript">
var t,obj,n=0;
var i=0.1;
var o=document.images;
var l=o.length-1
function resizeImage(){
if (n<=l){
 if (o[n].className=="indexImg"){
 i=0.2;
 obj=o[n]
 fadeIn()
 n++
 }
 else {
 n++
 resizeImage()
 }
}
}
function  fadeIn(){
if (i<=1){
i+=0.2;
k=i*100;
obj.style.cssText="filter:alpha(opacity="+k+");-moz-opacity:"+i+";opacity:"+i+";";
t=setTimeout("fadeIn()",3);
}
else{
 clearTimeout(t);
 resizeImage()
}
}
resizeImage()
</SCRIPT>
</body>
</html>

本站文章可直接用浏览器打印，无须专门打印页。    TOP