Phiên bản đầy đủ: jsB@nk » Hình ảnh » Ảnh lộn xộn
URL: https://www.javascriptbank.com/dhtml-puzzle.html
Đoạn mã này có chức năng cắt một ảnh bất kì được chỉ định thành một tấm ảnh được sắp xếp ngẫu nhiên bởi những mảnh cắt. Đây là một đoạn mã JavaScript rất hay và sáng tạo.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Ảnh lộn xộn
URL: https://www.javascriptbank.com/dhtml-puzzle.html
<script language="javascript">var picname="photo4.jpg"; // NAME OF PICTURE USED.var piccolor="black"; // BACKGROUND COLOR OF "EMPTY" SPOTvar picwidth=164; // THE PICTURE WILL BE SCALED TO FIT THIS WIDTH.var picheight=240; // THE PICTURE WILL BE SCALED TO FIT THIS HEIGHT. THESE NUMBERS *MUST* BE DIVISIBLE BY 5.//*************DO NOT EDIT BEYOND THIS POINT*************\\if(picwidth%5!=0 || picheight%5!=0 ){picheight=Math.round(picheight/5)*5;picwidth=Math.round(picwidth/5)*5;}var w3c=(document.getElementById)?true:false;var ns4=(document.layers)?true:false;var ie4=(document.all && !w3c)?true:false;var ie5=(document.all && w3c)?true:false;var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;var choices=[null, [6,2] , [1,3,7] , [2,8,4] , [3,5,9] , [4,10] , [1,7,11] , [2,6,8,12] , [3,7,9,13] , [4,8,10,14] , [5,9,15] , [6,12,16] , [7,11,13,17] , [8,12,14,18] , [9,13,15,19] , [10,14,20] , [11,17,21] , [12,16,18,22] , [13,17,19,23] , [14,18,20,24] , [15,19,25] , [16,22] , [21,17,23] , [22,18,24] , [23,19,25] , [24,20]];var grid=[null,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25];var blockw=Math.floor(picwidth/5);var blockh=Math.floor(picheight/5);var txt='', ctr=0, rc, IDs=new Array(), empty=new Object();var imgclipsX=new Array();var imgclipsY=new Array();for(i=0;i<5;i++){imgclipsX[i]=new Array(); imgclipsY[i]=new Array();imgclipsX[i][0]=blockw*i; imgclipsX[i][1]=blockw*(i+1);imgclipsY[i][0]=blockh*i; imgclipsY[i][1]=blockh*(i+1);}txt+=(ns4)? '<table cellpadding=0 cellspacing=0 border=0 bgcolor="'+piccolor+'" width="'+picwidth+'" height="'+picheight+'"><tr><td nowrap><ilayer name="cont" width="'+picwidth+'" height="'+picheight+'" bgcolor="'+piccolor+'">' : '<div style="position:relative; width:'+picwidth+'px; height:'+picheight+'px; background-color:'+piccolor+';">';for(r=5;r>=1;r--){for(c=5;c>=1;c--){if( !(r==5&&c==5)){rc=(5*r)+c-5;txt+=(ns4)? '<layer name="l'+rc+'" width="'+blockw+'" height="'+blockh+'" top="0" left="0" clip="'+imgclipsX[c-1][0]+' , '+imgclipsY[r-1][0]+', '+imgclipsX[c-1][1]+' , '+imgclipsY[r-1][1]+'" z-index="0">' : '<div id="l'+rc+'" style="position:absolute; top:0px; left:0px; width:'+blockw+'px; height:'+blockh+'px; clip:rect('+imgclipsY[r-1][0]+' '+imgclipsX[c-1][1]+' '+imgclipsY[r-1][1]+' '+imgclipsX[c-1][0]+'); z-index:'+(rc)+';">';txt+='<img src="'+picname+'" border="0" height="'+picheight+'" width="'+picwidth+'">';txt+=(ns4)? '</layer>' : '</div>';txt+=(ns4)? '<layer name="d'+rc+'" width="'+blockw+'" height="'+blockh+'" top="'+imgclipsY[r-1][0]+'" left="'+imgclipsX[c-1][0]+'" z-index="'+(rc+600)+'" onmouseover="status=\'Tile: '+rc+'\'; return true" onmouseout="status=defaultStatus"></layer>' : '<div id="d'+rc+'" style="position:absolute; top:'+imgclipsY[r-1][0]+'px; left:'+imgclipsX[c-1][0]+'px; width:'+blockw+'px; height:'+blockh+'px; z-index:'+(rc+600)+'" onmouseover="status=\'Tile: '+rc+'\'; return true" onclick="movetile('+rc+')"><table width="'+blockw+'" height="'+blockh+'" cellpadding="0" cellspacing="0" border="0"><tr><td> </td></tr></table></div>';}}}txt+=(ns4)? '</ilayer></td></tr></table>' : '</div>';txt+='<br><br><form><input type="button" value="Shuffle" onclick="ctr=0; autoshuffle()"></form>';document.write(txt);function getid(id){if(ns4) return document.cont.document.layers[id];else if(ie4) return document.all[id];else return document.getElementById(id);}function moveby(i,dx,dy){grid[0]=IDs[i].cellnum;IDs[i].cellnum=empty.cellnum;empty.cellnum=grid[0];grid[0]=grid[empty.cellnum];grid[empty.cellnum]=grid[IDs[i].cellnum];grid[IDs[i].cellnum]=grid[0];IDs[i].xeff+=dx;IDs[i].yeff+=dy;if(ns4){IDs[i].tile.moveBy(dx, dy);IDs[i].dummy.moveBy(dx, dy);}else{IDs[i].tile.style.left=(getleft(IDs[i].tile)+dx)+'px';IDs[i].tile.style.top=(gettop(IDs[i].tile)+dy)+'px';IDs[i].dummy.style.left=IDs[i].xeff+'px';IDs[i].dummy.style.top=IDs[i].yeff+'px';}}function getleft(id){if(ns4)return id.left;else return parseInt(id.style.left);}function gettop(id){if(ns4)return id.top;else return parseInt(id.style.top);}function tile(r,c){var i=(5*r)+c-5;this.tile=getid('l'+i);this.dummy=getid('d'+i);this.xeff=imgclipsX[c-1][0];this.yeff=imgclipsY[r-1][0];this.xstart=this.xeff;this.ystart=this.xeff;this.choices=choices[i];this.cellnum=i;if(ns4){this.dummy.captureEvents(Event.CLICK);this.dummy.onclick=function(){ movetile(i); }}}function movetile(i){if(IDs[i].xeff+blockw==empty.xeff && IDs[i].yeff==empty.yeff){ empty.xeff=IDs[i].xeff ; moveby(i, blockw, 0) }else if(IDs[i].xeff-blockw==empty.xeff && IDs[i].yeff==empty.yeff){ empty.xeff=IDs[i].xeff ; moveby(i, -blockw, 0) }else if(IDs[i].yeff+blockh==empty.yeff && IDs[i].xeff==empty.xeff){ empty.yeff=IDs[i].yeff ; moveby(i, 0, blockh) }else if(IDs[i].yeff-blockh==empty.yeff && IDs[i].xeff==empty.xeff){ empty.yeff=IDs[i].yeff ; moveby(i, 0, -blockh) }}function findwhich(num){for(var j=1;j<25;j++)if(IDs[j].cellnum==num) break;return j;}function autoshuffle(){ctr++;movetile(grid[choices[empty.cellnum][Math.floor(Math.random()*choices[empty.cellnum].length)]]);if(ctr<30)setTimeout('autoshuffle()' ,110);}window.onload=function(){for(r=5;r>=1;r--){for(c=5;c>=1;c--)if( !(r==5&&c==5))IDs[(5*r)+c-5]=new tile( r,c );}empty.xeff=imgclipsX[4][0];empty.yeff=imgclipsY[4][0];empty.choices=choices[25];empty.cellnum=25;}window.onresize=function(){ if(ns4)setTimeout('history.go(0)',400);}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->