<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <style> #container{ position: absolute; top: 50px; left: 100px; } </style> </head> <body> <div id="container"></div> <script> /** * 图片拼图 * @param {id} String [需要一个容器，传进一个id值] * @param {rows} Number [传入行数] * @param {cols} Number [传入列数] * @param {url} String [传入图片路径] * */ dynamicImg("container",10,10,"1.jpg"); function dynamicImg(id,rows,cols,url){ var defaultParam={ speed:500 }; var oImg=document.createElement("img"); var oContainer=$("#"+id); oImg.src=url; oImg.onload=function(){ oContainer.append(oImg); $(oImg).css("opacity",0); createLi(rows,cols); move(); } /*创造div，图片为背景，使用div把一个图片拼成一个完整的图片 只要不断移动div位置和图片背景的位置，就可以实现 */ function createLi(rows,cols){ oContainer.append("<div class='smallImg' id='smallImg'>"); var $smallImg=$("#smallImg"); var imgh=$(oImg).height(),imgw=$(oImg).width(); var r=imgh/rows,c=imgw/cols; for(var i=0;i<rows;i++){ for(var j=0;j<cols;j++){ var imgDiv=$("<div class='imgDiv'>"); $smallImg.append(imgDiv); imgDiv.get(0).cssT=i*r; imgDiv.get(0).cssL=j*c; imgDiv.css({position:"absolute", top:Math.random()*imgh,left:Math.random()*imgw, opacity:0, c,height:r, "background-image":"url("+url+")", "background-position":-j*c+"px -"+i*r+"px" }); } } } /*移动散乱的图片，拼成完整图片*/ function move(){ var $imgDiv=$(".imgDiv"); $imgDiv.each(function(){ $(this).animate({top:this.cssT,left:this.cssL,opacity:1},(Math.random()+10)*defaultParam.speed); }); } } </script> </body> </html>
呵呵，就一个拼图，没什么好说。
