(精)N张图片循环组和(很有动感)
<a href='http://www.cnblogs.com/A0NE'>www.cnblogs.com/A0NE 热情的沙漠</a>
<!-- http://www.99new.com.cn -->
<!-- bbs http://bbs.99new.com.cn -->
<!--要完成此效果需要两个步骤
第一步：把如下代码加入到<body>区域中-->
<STYLE>
.spanstyle {
LEFT: -5000px; POSITION: absolute
}
</STYLE>
<script>
<!--
var imgwidth=800
var imgheight=600
var imgurl=new Array()
imgurl[0]="http://www.99new.com.cn/supesite/templates/default/images/logo.gif"
imgurl[1]="http://blogimg.focus.cn/upload/photo/blog161/1611314.jpg"
imgurl[2]="http://www.xjxdkj.com/uploadfiles/2006-8/200681716313567.jpg"
imgurl[3]="http://hiphotos.baidu.com/haikuo_tiankong/pic/item/2c2b708d9cb6c619b31bba92.jpg"
imgurl[4]="http://www.caike.com/upload/2006/9/1880152/20060919113841767.gif"
imgurl[5]="http://www2.52moto.cn/pic/f4k29fj2/1/b/4154-6193107.jpg"
var imgpreload=new Array()
for (i=0;i<=imgurl.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgurl[i]
}
var x_finalpos=300
var y_finalpos=200
var x_slices=8
var y_slices=3
var pause=10
var screenwidth=1000
var screenheight=750
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)
}
}
-->
</script>
<script>
<!--
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
}
-->
</script>
<!--第二步：把“onload=changeimage()”加在<body>标记里
例如：-->
<body onload=changeimage()>
摘自：http://www.cnblogs.com/A0NE/archive/2007/11/07/951925.html
<!-- http://www.99new.com.cn -->
<!-- bbs http://bbs.99new.com.cn -->
<!--要完成此效果需要两个步骤
第一步：把如下代码加入到<body>区域中-->
<STYLE>
.spanstyle {
LEFT: -5000px; POSITION: absolute
}
</STYLE>
<script>
<!--
var imgwidth=800
var imgheight=600
var imgurl=new Array()
imgurl[0]="http://www.99new.com.cn/supesite/templates/default/images/logo.gif"
imgurl[1]="http://blogimg.focus.cn/upload/photo/blog161/1611314.jpg"
imgurl[2]="http://www.xjxdkj.com/uploadfiles/2006-8/200681716313567.jpg"
imgurl[3]="http://hiphotos.baidu.com/haikuo_tiankong/pic/item/2c2b708d9cb6c619b31bba92.jpg"
imgurl[4]="http://www.caike.com/upload/2006/9/1880152/20060919113841767.gif"
imgurl[5]="http://www2.52moto.cn/pic/f4k29fj2/1/b/4154-6193107.jpg"
var imgpreload=new Array()
for (i=0;i<=imgurl.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgurl[i]
}
var x_finalpos=300
var y_finalpos=200
var x_slices=8
var y_slices=3
var pause=10
var screenwidth=1000
var screenheight=750
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)
}
}
-->
</script>
<script>
<!--
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
}
-->
</script>
<!--第二步：把“onload=changeimage()”加在<body>标记里
例如：-->
<body onload=changeimage()>
摘自：http://www.cnblogs.com/A0NE/archive/2007/11/07/951925.html
