26、图像的分片合拢效果

26、图像的分片合拢效果

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

 

<title>网页特效--图像的分片合拢效果</title>

</head>

 

<body onLoad="initiate()">

 

<SCRIPT>

var imgwidth=140

var imgheight=105

var imgurl="sto/01.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"}

</SCRIPT>

 

<SCRIPT>

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}

</SCRIPT>

 

</body>

 

</html>

 

Write a comment

Comments: 0