首页 > 其他 > 详细

有意思的图片组合飞入效果

时间:2014-07-28 16:43:34      阅读:388      评论:0      收藏:0      [点我收藏+]
  • 有意思的图片组合飞入效果,本代码将多张GIF图片按一定方向组合在一起,由两个方向向一个方向组合,需要多张图片,但最终效果挺好,以前不怎么见到过,发上来分享给JS爱好者,请预览看效果吧。



<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>河北草坪</title>

</head>

<body onload=changeimage()>

<STYLE>

.spanstyle {

LEFT: -5000px; POSITION: absolute

}

</STYLE>

<SCRIPT>

var imgwidth=200

var imgheight=90

var imgurl=new Array()

imgurl[0]="/jscss/demoimg/201303/1.gif"

imgurl[1]="/jscss/demoimg/201303/5.gif"

imgurl[2]="/jscss/demoimg/201303/6.gif"

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

var screenheight=500

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>

</body>

</html>


有意思的图片组合飞入效果,布布扣,bubuko.com

有意思的图片组合飞入效果

原文:http://chunzhisu.blog.51cto.com/9123977/1531199

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!