Phiên bản đầy đủ: jsB@nk » Hình ảnh » Chuyển ảnh » Ảnh ráp từng mảnh
URL: https://www.javascriptbank.com/imagefactory-reassembles-your-images-out-of-the-debris.html
Hiệu ứng làm cho ảnh xuất hiện trên website bằng cách lắp ráp từ nhiều khối vụn lại với nhau. Bạn có thể thay đổi các thông số về thời gian ghép, số mảnh vụn.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Chuyển ảnh » Ảnh ráp từng mảnh
URL: https://www.javascriptbank.com/imagefactory-reassembles-your-images-out-of-the-debris.html
<STYLE>.spanstyle {LEFT: -5000px; POSITION: absolute}</STYLE><SCRIPT><!-- Beginning of JavaScript -// CONFIGURATION:// 1.Create your images (gif or jpg). They should have the same width and height.// Put those images in the same directory as the HTML-file. //You can add as many images as you like to this show.// 2. Copy and paste the two script-blocks into your HTML-file:// Put the first script-block inside the head-section of your HTML-file.//Put the second script-block right at the end of the //body-section of your HTML-file.// 2.Copy and paste the style-sheet into head-section of your HTML-file.// 3. Insert 'onLoad="changeimage()"' into the body tag.// 4. Configure the variables below:// The width of your images (pixels). All pictures should have the same width.var imgwidth=400// The height of your images (pixels). All pictures should have the same height.var imgheight=240// The URL of your images. You may add as many images as you like.var imgurl=new Array()imgurl[0]="logojs.gif"imgurl[1]="photo4.jpg"imgurl[2]="photo3.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 windowvar x_finalpos=240// Final vertical position of the image: distance to the top margin of the windowvar y_finalpos=80// 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=800var screenheight=500// Do not change the variables belowvar x_step=new Array()var y_step=new Array()var x_randompos=0var y_randompos=0var i_loop=0var max_loop=20var i_image=0var width_slice=Math.floor(imgwidth/x_slices)var height_slice=Math.floor(imgheight/y_slices)var cliptop=0var clipbottom=height_slicevar clipleft=0var clipright=width_slicevar spancounter=0function initiate() {cliptop=0clipbottom=height_sliceclipleft=0clipright=width_slicei_loop=0spancounter=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_randomposthisspan.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=0for (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=-5000thisspan.posTop=-5000spancounter++}}spancounter=0if (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=0if (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=0clearTimeout(timer)var timer=setTimeout("changeimage()",2000)}}// - End of JavaScript - --></SCRIPT><BODY onload=changeimage()><SCRIPT><!-- 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></BODY>