<html>
<head>
<title>모아지는 이미지</title><STYLE>
<style>
.spanstyle {
position:absolute;
left:-5000px;
}
</style>
<script>
// The width of your images (pixels). All pictures should have the same width.
var imgwidth=300 //그림가로넓이
// The height of your images (pixels). All pictures should have the same height.
var imgheight=250 //그림세로넓이
// The URL of your images. You may add as many images as you like.
var imgurl=new Array()
imgurl[0]="script/imge/2183787.jpg"
imgurl[1]="script/imge/2183788.jpg"
imgurl[2]="script/imge/2183791.jpg"
imgurl[3]="script/imge/2183792.jpg"
// 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=100
// Final vertical position of the image: distance to the top margin of the window
var y_finalpos=50
// 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=400
var screenheight=400
// 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></head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" onload="changeimage();">
<script language="JavaScript">
<!-- 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>
<table width="450" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<P align="center"> </P>
<P align="center"> </P>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><br> </p>
</td>
</tr>
</table>
</BODY> </html>
'Javascript' 카테고리의 다른 글
| 올라오는 이미지 (0) | 2016.06.01 |
|---|---|
| 풀화면 창 열기 (0) | 2016.06.01 |
| 링크된 곳에 마우스를 올리면 그림에 (0) | 2016.06.01 |
| 스크롤되는 이미지에 링크걸기 (0) | 2016.06.01 |
| 마우스 오버때 음악 나오게 하기 (0) | 2016.06.01 |