衝擊視覺的組合圖像

- 中國WEB開發者網絡 (http://www.webasp.net)
-- 網頁特效 (http://www.webasp.net/javascript/)
--- 衝擊視覺的組合圖像 (http://www.webasp.net/javascript/1/273.htm)
-- 發佈日期： 2004-07-13
<!-- 網頁特效代碼由[中國WEB開發者網絡:http://www.ChinaWebDev.com]提供！ -->
<!-- 要實現此效果需要 3 個步驟： -->

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

<SCRIPT>
<!-- Beginning of JavaScript -
var imgwidth=150
var imgheight=60
var imgurl="http://www.webasp.net/images/logo.gif"
var marginright
var imgslices=20
var width_slice=Math.floor(imgwidth/imgslices)
var cliptop=0
var clipbottom=imgheight
var clipleft=0
var clipright=width_slice
var step=50
var pause=20
var spannummer=0
var spannrbefore=0
var x_finalpos=5
var y_finalpos=5

function initiate() {
if (document.all) {
moveslices_IE()
}
}

function moveslices_IE() {
var thisspan=eval("document.all.span"+spannummer+".style")
if (thisspan.posLeft>x_finalpos-width_slice) {
thisspan.posLeft-=step
var timer=setTimeout("moveslices_IE()",pause)
}
else if (spannummer<imgslices-1) {
clearTimeout(timer)
thisspan.posLeft=x_finalpos
spannummer++
var timer=setTimeout("moveslices_IE()",pause)
}
else {
thisspan.posLeft=x_finalpos
clearTimeout(timer)
var timer=setTimeout("showredir()",1000)
}
}

function showredir() {
document.all.redir.style.visibility="VISIBLE"
}

// - End of JavaScript - -->
</SCRIPT>




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

<BODY onload=initiate()>



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

<SCRIPT>
<!-- Beginning of JavaScript -

for (i=0;i<=imgslices-1;i++) {
marginright=screen.width+50
document.write("<span id='span"+i+"' style='position:absolute;visibility:visible; left:"+marginright+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")
document.write("<img src='"+imgurl+"'>")
document.write("</span>")
clipleft+=width_slice
clipright+=width_slice
}
// - End of JavaScript - -->
</SCRIPT>

webasp.net