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 相关文章推荐
Javascript 类与静态类的实现
Apr 01 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
js+css实现打字效果
Jun 24 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
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
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
javascript来定义类的规范小结
2010/11/19 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
详解VUE前端按钮权限控制
2019/04/26 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
python自定义异常实例详解
2017/07/11 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
Python内置函数及功能简介汇总
2020/10/13 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
新三好学生主要事迹
2014/01/23 职场文书
会计专业自荐书
2014/07/08 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
实习生个人总结范文
2015/02/28 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python