圖片顯示特效

- 中國WEB開發者網絡 (http://www.webasp.net)
-- 網頁特效 (http://www.webasp.net/javascript/)
--- 圖片顯示特效 (http://www.webasp.net/javascript/1/277.htm)
-- 發佈日期： 2004-07-13
<!-- 網頁特效代碼由[中國WEB開發者網絡:http://www.ChinaWebDev.com]提供！ -->
<!-- 要實現此效果需要 2 個步驟： -->

<!-- 第 1 步： -->
<!-- 把<BODY>中的屬性代碼改為： -->

<BODY onload=setValues()>



<!-- 第 2 步： -->
<!-- 把下面的代碼加到<BODY></BODY>區域中： -->

<script>
<!--
var imageheight=60
var imagewidth=150

var cliptop
var clipbottom
var clipleft
var clipright
var clippoints

var tempo=100

var stepx=0
var stepy=0
var timer

function setValues() {
if (document.all) {
document.all.image.style.posLeft=0
document.all.image.style.posTop=0
document.all.imagecontent.style.posLeft=0
document.all.imagecontent.style.posTop=0
moveimage()
}
}

function moveimage() {
if (stepx<=imagewidth || stepy<=imageheight) {
stepx=stepx+12
stepy=stepy+6
image.innerHTML="<span style='width:"+stepx+"px; height:"+stepy+"px;background-color:000000;filter:alpha(opacity=0,finishopacity=100,style=2'></span>"
cliptop=0
clipbottom=stepy
clipleft=0
clipright=stepx

clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.all.imagecontent.style.clip=clippoints
timer=setTimeout("moveimage()",tempo)
}
else{
clearTimeout(timer)
timer=setTimeout("moveimage2()",tempo)
}
}

function moveimage2() {
if (stepx>=0 || stepy>=0) {
stepx=stepx-12
stepy=stepy-6
image.innerHTML="<span style='width:"+stepx+"px; height:"+stepy+"px;background-color:000000;filter:alpha(opacity=0,finishopacity=100,style=2'></span>"
cliptop=0
clipbottom=stepy
clipleft=0
clipright=stepx

clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.all.imagecontent.style.clip=clippoints
timer=setTimeout("moveimage2()",tempo)
}
else{
stepx=0
stepy=0
clearTimeout(timer)
timer=setTimeout("moveimage()",tempo)
}
}
-->
</script>
<DIV id=imagecontent style="LEFT: -5000px; POSITION: absolute; TOP: -5000px"><IMG height=60 src="http://www.webasp.net/images/logo.gif" width=150></DIV>
<DIV id=image style="POSITION: absolute; TOP: -50px"></DIV>

webasp.net