Phiên bản đầy đủ: jsB@nk » Hình ảnh » Chuyển ảnh » Ảnh tan vỡ dần
URL: https://www.javascriptbank.com/image-rotation-with-new-transition-and-dissolving-effect.html
Hiệu ứng tạo một trình diễn ảnh theo nguyên tắc từng mảng nhỏ của ảnh sau xuất hiện chồng lên ảnh trước trong một thời gian ngắn cho đến khi thu được ảnh hoàn chỉnh.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Chuyển ảnh » Ảnh tan vỡ dần
URL: https://www.javascriptbank.com/image-rotation-with-new-transition-and-dissolving-effect.html
<STYLE>.spanstyle {LEFT: 0px; POSITION: absolute; width: 100%; text-align: center;}</STYLE><SCRIPT><!-- Beginning of JavaScript -// CONFIGURATION:// 1. Copy the two script-blocks:// Paste the first script-block inside the head-section of your HTML-file.//Insert the second script-block into the body-section.// 2. Copy the style-block and paste it into the head-section of your HTML-file.// 3.Put your images into the same directory as the HTML-file.//You may add as many images as you like.// 4. Insert 'onLoad="checkbrowser()"' into the body-tag.// 5. Configure the variables below:// The width of your images (pixels)var imgwidth=800// The height of your images (pixels)var imgheight=250// The name of your images. You may add as many images as you like.var imgname=new Array()imgname[0]="logojs.gif"imgname[1]="photo1.jpg"imgname[2]="photo2.jpg"imgname[3]="photo3.jpg"// This block will preload your images. Do not edit this block.var imgpreload=new Array()for (i=0;i<=imgname.length-1;i++) {imgpreload[i]=new Image()imgpreload[i].src=imgname[i]}// Where should those images be linked to? // Add an URL for each image.// If you don't want to add an URL just write '#' instead of // the URL, see sample imgurl[2].var imgurl=new Array()imgurl[0]="http://javascriptbank.com"imgurl[1]="http://www.javascriptbank.com"imgurl[2]="http://javascriptbank.com"imgurl[3]="http://www.javascriptbank.com"// Final horizontal position of the image: distance to the left margin of the windowvar x_finalpos=30// Final vertical position of the image: distance to the top margin of the windowvar y_finalpos=30// Number of sliced cells (the higher this number the slower the visual effect)var x_slices=10// Number of sliced rows (the higher this number the slower the visual effect)var y_slices=8// Standstill between the images (microseconds)var pause=2500// Do not change the variables belowvar xy_slices=x_slices*y_slicesvar randomorder=new Array()for (i=0;i<=xy_slices-1;i++) {randomorder[i]=i}var speed=20var i_images=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=0var x_random=new Array()var y_random=new Array()var max_explsteps=15var i_explsteps=0function checkbrowser() {if (document.all) { initiate() } if (document.layers) { rotatenetscape() }}function initiate() { if (document.all) { 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=x_finalposthisspan.posTop=y_finalpos 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}for (i=0;i<=xy_slices-1;i++) {var thisspan=eval("span"+i)thisspan.innerHTML="<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>"}var timer=setTimeout("changeimage()",pause) }}function dissolveimg() {if (i_loop<=xy_slices-1) {var thisspan=eval("span"+randomorder[i_loop])thisspan.innerHTML="<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>"i_loop++var timer=setTimeout("dissolveimg()",speed)}else {clearTimeout(timer)var timer=setTimeout("changeimage()",pause)}}function changeimage() {getrandomorder(xy_slices)i_loop=0i_images++if (i_images>=imgname.length) {i_images=0} dissolveimg()}function getrandomorder(range) {for (i=0;i<=range;i++) {var firstvalue= Math.floor(range*Math.random())var secondvalue= Math.floor(range*Math.random())var cachevalue=randomorder[firstvalue]randomorder[firstvalue]=randomorder[secondvalue]randomorder[secondvalue]=cachevalue}}function rotatenetscape() {document.imgcontainer1.document.write("<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>")document.imgcontainer1.document.close()i_images++if (i_images>imgname.length-1) {i_images=0} var timer=setTimeout("rotatenetscape()",pause)}// - End of JavaScript - --></SCRIPT><BODY onload=checkbrowser()><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("<div id='span"+spancounter+"' class='spanstyle'>") document.write("</div>")spancounter++}}}if (document.layers) {document.write("<div id='imgcontainer1' class='spanstyle'>")document.write("</div>")document.close()document.imgcontainer1.left=x_finalposdocument.imgcontainer1.top=y_finalpos}// - End of JavaScript - --></SCRIPT></BODY>