快捷導航

js實現(xiàn)圖片放大縮小功能后進行復雜排序的方法

更新時間：2012年11月08日 14:48:19 作者：

這是一個基于jquery的圖片效果，它的作用是：當圖片點擊變大(變小)時，其它圖片按照一定的規(guī)則進行排序運動

這是一個基于jquery的圖片效果，它的作用是：當圖片點擊變大(變小)時，其它圖片按照一定的規(guī)則進行排序運動。

首先來看下最終的效果圖：

有人可能看到這個會覺得，這有什么難的，這么簡單的事，樓主是不是太小提大作了？當你真正去嘗試時，你才知道到底有什么難點。

首先，我們來講下需求：
1.圖片分為大小和小圖，大圖占四個小圖的位置，
2.點擊圖片放大縮小，重新排列順序,
3. 當點擊偶數(shù)列(2,4)時，它前面的那項將向提出來向后面排列
4.第一個項不能動，點第二個是將占第三四的位置，從后面取第一個小的放置在第二的位置上。
需求就是這樣的了，現(xiàn)在難度是否有加大呢，我的思路就是按照這個需求一步步去實現(xiàn)的。代碼如下：

復制代碼代碼如下:

var elemArr = $("#old").find("li").get(); 
var arrCol=[0,0,0,0]; 
var defaultSize = 211; 
function setPosition(elemArr,content,oldContent){ 
//alert(elemArr.length) 
if (elemArr.length==0){ 
$(oldContent).remove(); 
animate(content.find("li")); 
var max = Math.max(arrCol[0],arrCol[1],arrCol[2],arrCol[3]) 
$(content).parent().height(max); 
$(content).height(max); 
return; 
} 
var item= $(elemArr.shift()); 
if (item.hasClass("big")){ 
//大 
var min =computeMin(content); 
var x = min.x; 
var y =min.y; 
if (x==defaultSize){ 
var tmp = $("li[x='0'][y='"+y+"']",content); 
if (tmp.hasClass("static")){ 
//第一個 
/* 
arrCol[1]=0; 
x=2*defaultSize; 
if ($("li[x='"+x+"'][y='"+y+"']",content).size()>0){ 
y=parseInt($("li[x='"+x+"'][y='"+y+"']",content).attr("y"))+2*defaultSize; 
} 
arrCol[1]=0; 
*/ 
elemArr=insertSmallArr(elemArr,item); 
setPosition(elemArr,content,oldContent); 
return; 
}else{ 
elemArr=$("li[x='0'][y='"+y+"']",content).get().concat(elemArr); 
//$("li[x='0'][y='"+y+"']",content).remove(); 
x-=defaultSize; 
arrCol[0]-=defaultSize; 
} 
} 
if (x==defaultSize*3){ 
elemArr=$("li[x='"+defaultSize*2+"'][y='"+y+"']",content).get().concat(elemArr); 
//$("li[x='200'][y='"+y+"']",content).remove(); 
x-=defaultSize; 
arrCol[2]-=defaultSize; 
} 
item.attr({"top":y,"left":x}).attr({"x":x,"y":y}); 
if (x==0){ 
arrCol[0]+=defaultSize*2; 
arrCol[1]+=defaultSize*2; 
} 
if (x ==defaultSize*2){ 
arrCol[2]+=defaultSize*2; 
arrCol[3]+=defaultSize*2; 
} 
}else{ 
//小 
var min =computeMin(content); 
var x = min.x; 
var y =min.y; 
item.attr({"top":y,"left":x}).attr({"x":x,"y":y}); 

if (x==0){ 
arrCol[0]+=defaultSize; 
} 
if (x ==defaultSize){ 
arrCol[1]+=defaultSize; 
} 
if (x ==defaultSize*2){ 
arrCol[2]+=defaultSize; 
} 
if (x ==defaultSize*3){ 
arrCol[3]+=defaultSize; 
} 
} 
$(content).append(item) 
setPosition(elemArr,content,oldContent); 
} 
setPosition(elemArr,$("#news"),$("#old")); 
function insertSmallArr(arr,item){ 
arr = item.get().concat(arr); 
var tmpArr =[]; 
var first =null; 
for (var i=arr.length-1;i>=0 ;i-- ){ 
if (!$(arr[i]).hasClass("big")){ 
first=arr[i]; 
break; 
} 
} 
if (first){ 
tmpArr.push(first); 
} 
for (var i=0,l=arr.length;i<l ;i++ ){ 
if (first !== arr[i]){ 
tmpArr.push(arr[i]); 
} 
} 

return tmpArr; 
} 
function computeMin(content){ 
var arr = $(content).find("li"); 
var miny = Math.min(arrCol[0],arrCol[1],arrCol[2],arrCol[3]) 
var minx= 0; 
if (miny==arrCol[3]){ 
minx=defaultSize*3; 
} 
if (miny==arrCol[2]){ 
minx=defaultSize*2; 
} 
if (miny==arrCol[1]){ 
minx=defaultSize; 
} 
if (miny==arrCol[0]){ 
minx=0; 
} 
return {x:minx,y:miny}; 
} 
$("#main_content").delegate("li","click",function(){ 
if ($(this).index()==0){ 
return false; 
} 
if (!$(this).hasClass("big")){ 
$(this).attr({"h":417,"w":417}) 
}else{ 
$(this).attr({"h":206,"w":206}) 
} 
$(this).toggleClass("big"); 
$(this).parent().hide(); 
var c =$(this).parent().children(); 
c.attr({"x":0,"y":0}); 
arrCol=[0,0,0,0]; 
var tmpArr = c.get(); 
var content = $('<ul></ul>'); 
$("#main_content").append(content); 
setPosition(tmpArr,content,$(this).parent()); 
}) 
$("#addNews").click(function(){ 
var parent = $(this).closest("ul"); 
$(this).parent().after("<li>news</li>"); 
var c = parent.children(); 
var tmpArr = c.get(); 
var content = $('<ul></ul>'); 
$("#main_content").append(content); 
parent.hide(); 
arrCol=[0,0,0,0]; 
setPosition(tmpArr,content, parent); 
}); 
function animate(arr){ 

$(arr).each(function(){ 
$(this).animate({ 
"top":parseInt($(this).attr("top")), 
"left":parseInt($(this).attr("left")), 
"width":parseInt($(this).attr("w")), 
"height":parseInt($(this).attr("h")) 
}) 
}); 
}