js实现图片放大缩小功能后进行复杂排序的方法


Posted in Javascript onNovember 08, 2012

这是一个基于jquery的图片效果,它的作用是:当图片点击变大(变小)时,其它图片按照一定的规则进行排序运动。

首先来看下最终的效果图:
js实现图片放大缩小功能后进行复杂排序的方法

有人可能看到这个会觉得,这有什么难的,这么简单的事,楼主是不是太小提大作了?当你真正去尝试时,你才知道到底有什么难点。 

首先,我们来讲下需求:
1.图片分为大小和小图,大图占四个小图的位置,
2.点击图片放大缩小, 重新排列顺序,
3. 当点击偶数列(2,4)时,它前面的那项将向提出来向后面排列
4.第一个项不能动,点第二个是将占第三四的位置,从后面取第一个小的放置在第二的位置上。
需求就是这样的了,现在难度是否有加大呢,我的思路就是按照这个需求一步步去实现的。代码如下:

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")) 
}) 
}); 
}
Javascript 相关文章推荐
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
深入理解js中this的用法
May 28 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 #Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 #Javascript
Javascript继承(上)——对象构建介绍
Nov 08 #Javascript
异步javascript的原理和实现技巧介绍
Nov 08 #Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 #Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 #Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 #Javascript
You might like
一个更简单的无限级分类菜单代码
2007/01/16 PHP
php mysql索引问题
2008/06/07 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
node上的redis调用优化示例详解
2018/10/30 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
Python中正则表达式的详细教程
2015/04/30 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
通过shell+python实现企业微信预警
2019/03/07 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
linux面试题参考答案(4)
2013/01/28 面试题
求职意向书范文
2014/04/01 职场文书
感恩节活动策划方案
2014/05/16 职场文书
经济类毕业生求职信
2014/06/26 职场文书
建党伟业电影观后感
2015/06/01 职场文书
Django程序的优化技巧
2021/04/29 Python
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python