語法展示::   http://home.graffiti.net/ujkllgfd/


請用IE6.0或更新版本觀看語法特效展示

將以下程式碼複製,貼在<body>及</body>標籤之間。

<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>


將以下程式碼複製,貼在<head>及</head>標籤之間。

<script>
<!-- Beginning of JavaScript -
 
// The width of your images (pixels). All pictures should have the same width.
var imgwidth=235

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

// The URL of your images. You may add as many images as you like.
var imgurl=new Array()
imgurl[0]="圖片網址"
imgurl[1]="圖片網址"
imgurl[2]="圖片網址"

// 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=268

// Final vertical position of the image: distance to the top margin of the window
var y_finalpos=210

// 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=4

// Speed of the reassembling effect. More means slower.
var pause=15

// The width and heigth of the zone where the debris of the images are spread (pixels)
var screenwidth=800
var screenheight=600

// 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>
<style>
.spanstyle {
 position:absolute;
    left:-5000px;
}
</style>


將以下程式碼複製,貼在<body >標籤裡面。

 onLoad="changeimage()"

創作者介紹
創作者 uuiop6623 的頭像
uuiop6623

uuiop

uuiop6623 發表在 痞客邦 留言(0) 人氣()