JavaScript小技巧:图像褪色效果

第一步，将下面的代码加＜head＞与＜/head＞之间

＜STYLE type=text/<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>＞
.text {
 LEFT: -2000px; POSITION: absolute; WIDTH: 300px
}
.cover {
 LEFT: -2000px; POSITION: absolute
}
＜/STYLE＞
＜SCRIPT language=<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">JavaScript</a>＞
＜!--
var picOne=new Image()
picOne.src="../../images/0001.jpg" //你的图象路径
var picTwo=new Image()
picTwo.src="../../images/0002.jpg" //同上
var picThree=new Image()
picThree.src="../../images/0003.jpg" //同上
var message = new Array()
message[0]="＜img src=images/0001.jpg＞" //同上
message[1]="＜img src=images/0002.jpg＞" //同上
message[2]="＜img src=images/0003.jpg＞" //同上
var i_message=0
var covertop=30 //图片出现的位置
var coverleft=250 //同上
var coverwidth=1200
var coverheight=97
var texttop=covertop
var textleft=coverleft
var textwidth=300
var textheight=coverheight
var cliptop=0
var clipright=textwidth
var clipbottom=coverheight
var clipleft=0
var clippoints
var step=40
var pause=50
var timer
function init() {
 if (document.all) {
  document.all.text.style.posTop=texttop
 document.all.text.style.posLeft=textleft
 document.all.cover.style.posTop=covertop
 document.all.cover.style.posLeft=coverleft
 clipleft=0
 fadeout()
 }
 
 if (document.layers) {
  document.text.top=texttop
 document.text.left=textleft
 document.cover.top=covertop
 document.cover.left=coverleft
 clipleft=0
 fadeout()
 }
}
function fadeout() {
if (document.all) {
 if (document.all.cover.style.posLeft ＞=(-coverwidth+textwidth+coverleft+step)) { 
 clipleft+=step
 clipright=clipleft+textwidth
 clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
  document.all.cover.style.clip=clippoints
 document.all.cover.style.posLeft-=step
 timer= setTimeout("fadeout()",pause)
 }
 else {
 clearTimeout(timer)
 i   ssage++
 if (i_message＞=message.length) {i_message=0}
 text.inner<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>=message[i_message] 
 fadein()
 }
}
if (document.layers) {
 if (document.cover.left ＞=(-coverwidth+textwidth+coverleft+step-22)) { 
 clipleft+=step
 clipright=clipleft+textwidth
  document.cover.clip.top=cliptop
  document.cover.clip.left=clipleft
  document.cover.clip.bottom=clipbottom
  document.cover.clip.right=clipright
 document.cover.left-=step
 timer= setTimeout("fadeout()",pause)
 }
 else {
 clearTimeout(timer)
 i_message++
 if (i_message＞=message.length) {i_message=0}
 document.text.document.write(message[i_message]) 
  document.text.document.close() 
 fadein()
 }
}
}
function fadein() {
if (document.layers) {
 if (document.cover.left＜=coverleft) { 
  clipleft-=step
 clipright=clipleft+textwidth
  document.cover.clip.top=cliptop
  document.cover.clip.left=clipleft
  document.cover.clip.bottom=clipbottom
  document.cover.clip.right=clipright
 document.cover.left+=step
 timer= setTimeout("fadein()",pause)
 }
 else {
 clearTimeout(timer)
 init()
 }
}
if (document.all) {
 if (document.all.cover.style.posLeft＜=coverleft) { 
 clipleft-=step
 clipright=clipleft+textwidth
 clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
  document.all.cover.style.clip=clippoints
 document.all.cover.style.posLeft+=step
 timer= setTimeout("fadein()",pause)
 }
 else {
 clearTimeout(timer)
 init()
 }
}
}
// --＞
＜/SCRIPT＞

第二步：将下面的原代码加入＜body＞与＜/body＞之间

注意图象的路径，，其中nothing.gif是经过特殊处理的。

第二步：将下面红色部分加入＜body＞标志

＜body onload=init() style="OVERFLOW-X: hidden; OVERFLOW-Y: scroll; WIDTH: 100%"＞

说明：
其文本框中的注解改成你自已的。
^o^ ^o^！