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"))
})
});
}
首先來看下最終的效果圖:

有人可能看到這個會覺得,這有什么難的,這么簡單的事,樓主是不是太小提大作了?當你真正去嘗試時,你才知道到底有什么難點。
首先,我們來講下需求:
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"))
})
});
}
您可能感興趣的文章:
- JS簡單的圖片放大縮小的兩種方法
- JS網(wǎng)頁圖片查看器(兼容IE、FF)可控制圖片放大縮小移動
- javascript 圖片放大縮小功能實現(xiàn)代碼
- JS實現(xiàn)圖片放大縮小的方法
- js實現(xiàn)用滾動條來放大縮小圖片的代碼
- js實現(xiàn)圖片旋轉 js滾動鼠標中間對圖片放大縮小
- js實現(xiàn)圖片緩慢放大縮小效果
- 原生js實現(xiàn)圖片放大縮小計時器效果
- js實現(xiàn)使用鼠標拖拽切換圖片的方法
- 原生JS實現(xiàn)拖拽圖片效果
- JS實現(xiàn)放大、縮小及拖拽圖片的方法【可兼容IE、火狐】
- JavaScript實現(xiàn)圖片的放大縮小及拖拽功能示例
相關文章
基于jquery實現(xiàn)鼠標左右拖動滑塊滑動附源碼下載
這篇文章主要介紹了基于jquery實現(xiàn)鼠標左右拖動滑塊滑動附源碼下載 的相關資料,需要的朋友可以參考下2015-12-12jQuery插件MixItUp實現(xiàn)動畫過濾和排序
MixItUp過濾排序jQuery插件是一款鼠標滑過圖片顯示描述的jQuery過濾排序插件。是一款輕量,但功能強大的 jQuery 插件,提供了對分類和有序內容的美麗的動畫過濾和排序功能。特別適合用于作品集網(wǎng)站,畫廊,圖片博客以及任何的分類或有序內容。2015-04-04jQuery實現(xiàn)為table表格動態(tài)添加或刪除tr功能示例
這篇文章主要介紹了jQuery實現(xiàn)為table表格動態(tài)添加或刪除tr功能,結合實例形式分析了jQuery針對table表格行動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-02-02