字体:  

刚刚收集到了一个图片爆裂代码,改造了一下,和大家一起分享

wrcyl 发表于: 2008-8-15 17:43 来源: PHPChina 开源社区门户

刚刚从一个游戏网站上看到了这种效果,就把他的代码拿下来研究了一下,终于被我给弄开来了
现在在网上好像还找不到这样的代码,所以我拿出来和大家分享一下,正所谓好东西大家一起用!
var x_step=new Array();
var y_step=new Array();
var x_randompos=new Array();
var y_randompos=new Array();
var x_startpos=0;
var y_startpos=0;
var x_slices=8;
var y_slices=3;
var width_slice=0;
var height_slice=0;
var spancounter=0;
var pause=10;
var max_loop=20;
var i_loop=0;
function explode_init()
{
f=document;
spancounter=0;
if (f.all) {
  for (i=0;i<=y_slices-1;i++) {
   for (ii=0;ii<=x_slices-1;ii++) {
    f.write("<span id='span"+spancounter+"' style='POSITION: absolute;display: ;'></span>");
    spancounter++
   }
  }
  spancounter=0;
}
}
function explode_start(obj)
{
var f=document;
var img = f.getElementById(obj);//eval("parent.wog_view.document."+obj);
width_slice=Math.floor(img.width/x_slices);
height_slice=Math.floor(img.height/y_slices);
if(img.style.left.search("%")==-1)
{
  x_startpos = img.style.posLeft+300;
}
else
{
  x_startpos = (f.body.offsetWidth-20) * (img.style.posLeft)/100+300;
}
if(img.style.top.search("%")==-1)
{
  y_startpos = img.style.posTop+200;
}
else
{
  y_startpos = (f.body.offsetHeight - 5) * img.style.posTop/100+200;
}
cliptop=0;
clipbottom=height_slice;
clipleft=0;
clipright=width_slice;
i_loop=0;
spancounter=0;
for (i=0;i<=y_slices-1;i++) {
  for (ii=0;ii<=x_slices-1;ii++) {
   x_randompos[spancounter] = Math.ceil(f.body.offsetWidth*Math.random());
   y_randompos[spancounter] = Math.ceil(f.body.offsetHeight*Math.random());
   var thisinnerspan=f.getElementById("span"+spancounter);
   thisinnerspan.innerHTML="<img id='spimg"+spancounter+"' src='"+img.src+"' style='FILTER: alpha(opacity=100);'>"
   thisinnerspan.style.posLeft = x_startpos;
   thisinnerspan.style.posTop = y_startpos;
   thisinnerspan.style.clip = "rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";
   clipleft+=width_slice;
         clipright+=width_slice;
   spancounter++;
  }
  clipleft=0
        clipright=width_slice
        cliptop+=height_slice
        clipbottom+=height_slice
}
spancounter=0;
img.style.display = "none";
explode_IE(f);
}
function explode_IE(f) {
spancounter=0;
for (i=0;i<=y_slices-1;i++) {
  for (ii=0;ii<=x_slices-1;ii++) {
   try{
    var thisspan=f.getElementById("span"+spancounter).style;
    x_step[spancounter]=(x_randompos[spancounter]-thisspan.posLeft)/(max_loop);
    y_step[spancounter]=(y_randompos[spancounter]-thisspan.posTop)/(max_loop);
    thisspan.posLeft+=x_step[spancounter];
    thisspan.posTop+=y_step[spancounter];
    var eimg = f.getElementById("spimg"+spancounter);
    eimg.filters.alpha.opacity = (eimg.filters.alpha.opacity-100/(max_loop));
    spancounter++;
    if(max_loop==i_loop) thisspan.display = "none";
   }catch(e){}
  }
}
i_loop++;
spancounter=0;
if(max_loop>=i_loop) var timer=setTimeout("explode_IE(document)",pause);
}


调用的时候先初始化
explode_init()
然后
setTimeout('explode_start("m111")',1000);
m111为图片的ID

最新回复

小菜鸟 at 2008-8-15 18:20:30
  要是能提供个演示地址的话,会更好 = =
linvo at 2008-8-15 18:31:49

QUOTE:

原帖由 小菜鸟 于 2008-8-15 18:20 发表
  要是能提供个演示地址的话,会更好 = =
lxylxy888666 at 2008-8-15 18:48:57
貌似错的。。
汉化天空 at 2008-8-15 19:18:00

QUOTE:

原帖由 小菜鸟 于 2008-8-15 18:20 发表
  要是能提供个演示地址的话,会更好 = =
m35 at 2008-8-15 19:39:08
干什么用的?
wubin791215 at 2008-8-16 11:21:14
直接做成文件打包才好呢