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 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
javascript轮播图算法
Oct 21 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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
PHP 学习路线与时间表
2010/02/21 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
Python 自动刷博客浏览量实例代码
2017/06/14 Python
python使用fork实现守护进程的方法
2017/11/16 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
python学生信息管理系统(初级版)
2018/10/17 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
医药工作岗位求职信分享
2013/12/31 职场文书
项目经理聘任书
2014/03/29 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL