141、图片打碎后组合

141、图片打碎后组合

脚本说明:

第一步:把如下代码加入<body>区域中

<STYLE>

.spanstyle {

       LEFT: -5000px; POSITION: absolute

}

</STYLE>

<SCRIPT>

<!-- Beginning of JavaScript -

      

// The width of your images (pixels). All pictures should have the same width.

var imgwidth=200

 

// The height of your images (pixels). All pictures should have the same height.

var imgheight=90

 

// The URL of your images. You may add as many images as you like.

var imgurl=new Array()

imgurl[0]="a048.gif"

imgurl[1]="a049.gif"

imgurl[2]="a052.gif"

 

// Do not edit this block.

var imgpreload=new Array()

for (i=0;i<=imgurl.length-1;i++) {

       imgpreload[i]=new Image()

       imgpreload[i].src=imgurl[i]

}

 

// Final horizontal position of the image: distance to the left margin of the window

var x_finalpos=300

 

// Final vertical position of the image: distance to the top margin of the window

var y_finalpos=200

 

// Number of sliced cells (the higher this value the slower the script)

var x_slices=8

 

// Number of sliced rows (the higher this value the slower the script)

var y_slices=3

 

// Speed of the reassembling effect. More means slower.

var pause=10

 

// The width and heigth of the zone where the debris of the images are spread (pixels)

var screenwidth=800

var screenheight=500

 

// Do not change the variables below

var x_step=new Array()

var y_step=new Array()

var x_randompos=0

var y_randompos=0

var i_loop=0

var max_loop=20

var i_image=0

var width_slice=Math.floor(imgwidth/x_slices)

var height_slice=Math.floor(imgheight/y_slices)

var cliptop=0

var clipbottom=height_slice

var clipleft=0

var clipright=width_slice

var spancounter=0

 

function initiate() {

       cliptop=0

       clipbottom=height_slice

       clipleft=0

       clipright=width_slice

       i_loop=0

       spancounter=0

    if (document.all) {

          for (i=0;i<=y_slices-1;i++) {

                     for (ii=0;ii<=x_slices-1;ii++) {

                            var thisspan=eval("document.all.span"+spancounter+".style")

                            x_randompos=Math.ceil(screenwidth*Math.random())

                            y_randompos=Math.ceil(screenheight*Math.random())

                            thisspan.posLeft=x_randompos

                            thisspan.posTop=y_randompos

                thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

                            clipleft+=width_slice

                      clipright+=width_slice

                      spancounter++

                     }

               clipleft=0

               clipright=width_slice

               cliptop+=height_slice

               clipbottom+=height_slice

              }

   }

   explode_IE()

}

 

function changeimage() {

       spancounter=0

       for (i=0;i<=y_slices-1;i++) {

              for (ii=0;ii<=x_slices-1;ii++) {

                     var thisspan=eval("document.all.span"+spancounter+".style")          

                     thisspan.posLeft=-5000

                     thisspan.posTop=-5000

                     spancounter++

              }

       }

       spancounter=0

       if (i_image>imgurl.length-1) {i_image=0}

       for (i=0;i<=y_slices-1;i++) {

              for (ii=0;ii<=x_slices-1;ii++) {

                     var thisinnerspan=eval("span"+spancounter)

                  thisinnerspan.innerHTML="<img src='"+imgurl[i_image]+"'>"

                     spancounter++

              }

       }

       i_image++

       initiate()

}

 

 

function explode_IE() {

       spancounter=0

       if (i_loop<=max_loop-1) {

              for (i=0;i<=y_slices-1;i++) {

                     for (ii=0;ii<=x_slices-1;ii++) {

                            var thisspan=eval("document.all.span"+spancounter+".style")

                            x_step[spancounter]=(x_finalpos-thisspan.posLeft)/(max_loop-i_loop)

                            y_step[spancounter]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)            

                            thisspan.posLeft+=x_step[spancounter]

                            thisspan.posTop+=y_step[spancounter]

                            spancounter++

                     }

              }

              i_loop++

              var timer=setTimeout("explode_IE()",pause)

       }

       else {

              spancounter=0

              clearTimeout(timer)

              var timer=setTimeout("changeimage()",2000)

       }

}

 

 

// - End of JavaScript - -->

</SCRIPT>

<SCRIPT>

<!-- Beginning of JavaScript -

if (document.all) {

       for (i=0;i<=y_slices-1;i++) {

              for (ii=0;ii<=x_slices-1;ii++) {

                  document.write("<span id='span"+spancounter+"' class='spanstyle'></span>")

                     spancounter++

              }

       }

       spancounter=0

}

// - End of JavaScript - -->

</SCRIPT>

 

 

 

 

 

第二步:把<body>中的内容改为:

<body onload=changeimage()>

 

Write a comment

Comments: 0