Home > Web Front-end > JS Tutorial > body text

Loop group sum of 3 pictures (very dynamic)_Image special effects

WBOY
Release: 2016-05-16 19:27:44
Original
1078 people have browsed it
tag For example: -->
[Ctrl A select all Note:
If you need to introduce external Js, you need to refresh to execute <script> <!-- var imgwidth=468 var imgheight=120 var imgurl=new Array() imgurl[0]="/files/pic/20050817/200581702204033863.gif" imgurl[1]="/files/pic/20050817/200581702204648587.gif" imgurl[2]="/files/pic/20050817/200581702204999274.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=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]+"' alt="Loop group sum of 3 pictures (very dynamic)_Image special effects" >" 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'>") spancounter++ } } spancounter=0 } --> </script>
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template