Home Web Front-end JS Tutorial js method to implement complex sorting after zooming in and out of images_jquery

js method to implement complex sorting after zooming in and out of images_jquery

May 16, 2016 pm 05:48 PM
picture enlarge zoom out

This is a picture effect based on jquery. Its function is: when the picture becomes larger (smaller) when clicked, other pictures will be sorted and moved according to certain rules.

First of all, let’s take a look at the final rendering:


Some people may think after seeing this, why is this so difficult? Isn’t it too simple? Did Xiaoti make a big deal? Only when you actually try it will you know what the difficulty is.

First of all, let’s talk about the requirements:
1. Pictures are divided into big and small pictures. The big picture occupies the position of four small pictures.
2. Click on the picture to zoom in and out and rearrange the order. ,
3. When you click on the even column (2,4), the item in front of it will be lifted up and arranged behind it
4. The first item cannot be moved, and the second item will occupy the third place if you click on it. For the position of four, take the first small one from the back and place it in the second position.
The demand is like this. Is it more difficult now? My idea is to implement it step by step according to this demand. The code is as follows:

Copy the code The code is as follows:

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"))
})
});
}
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to solve the problem of automatically saving pictures when publishing on Xiaohongshu? Where is the automatically saved image when posting? How to solve the problem of automatically saving pictures when publishing on Xiaohongshu? Where is the automatically saved image when posting? Mar 22, 2024 am 08:06 AM

How to solve the problem of automatically saving pictures when publishing on Xiaohongshu? Where is the automatically saved image when posting?

How to post pictures in TikTok comments? Where is the entrance to the pictures in the comment area? How to post pictures in TikTok comments? Where is the entrance to the pictures in the comment area? Mar 21, 2024 pm 09:12 PM

How to post pictures in TikTok comments? Where is the entrance to the pictures in the comment area?

6 Ways to Make Pictures Sharper on iPhone 6 Ways to Make Pictures Sharper on iPhone Mar 04, 2024 pm 06:25 PM

6 Ways to Make Pictures Sharper on iPhone

How to make ppt pictures appear one by one How to make ppt pictures appear one by one Mar 25, 2024 pm 04:00 PM

How to make ppt pictures appear one by one

How to convert pdf documents into jpg images with Foxit PDF Reader - How to convert pdf documents into jpg images with Foxit PDF Reader How to convert pdf documents into jpg images with Foxit PDF Reader - How to convert pdf documents into jpg images with Foxit PDF Reader Mar 04, 2024 pm 05:49 PM

How to convert pdf documents into jpg images with Foxit PDF Reader - How to convert pdf documents into jpg images with Foxit PDF Reader

How to use JavaScript to implement the drag and zoom function of images? How to use JavaScript to implement the drag and zoom function of images? Oct 27, 2023 am 09:39 AM

How to use JavaScript to implement the drag and zoom function of images?

How to use HTML, CSS and jQuery to implement advanced functions of image merging and display How to use HTML, CSS and jQuery to implement advanced functions of image merging and display Oct 27, 2023 pm 04:36 PM

How to use HTML, CSS and jQuery to implement advanced functions of image merging and display

How to arrange two pictures side by side in wps document How to arrange two pictures side by side in wps document Mar 20, 2024 pm 04:00 PM

How to arrange two pictures side by side in wps document

See all articles