js兑现图片放大缩小后进行的复杂排序-JavaSript-爱易网页

js兑现图片放大缩小后进行的复杂排序

日期：2014-05-16　浏览次数：20328 次

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

作者：田想兵博客地址:http://www.cnblogs.com/tianxiangbing

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

首先来看下最终的效果图：

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

这篇文章的实例请点击这里

首先，我们来讲下需求：

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='"&#

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。