Question

我有点难过。我有一个包含5个项目的无序列表。第3项的样式看起来比其他项目大。

点击某个项目时，我希望该项目能够设置为中间位置（如旋转木马），并使其余列表项目相应地向上或向下移动。

enter image description here

<ul>
   <li>one</li>
   <li>two</li>
   <li class="bigOne">three</li>
   <li>four</li>
   <li>five</li>
</ul>

因此，如果我点击第五项 - 列表将变为：

<ul>
   <li>three</li>
   <li>four</li>
   <li class="bigOne">five</li>
   <li>one</li>
   <li>two</li>
</ul>

如果单击第二项，列表将变为：

<ul>
   <li>five</li>
   <li>one</li>
   <li class="bigOne">two</li>
   <li>three</li>
   <li>four</li>
</ul>

我已经能够将项目转移到第三个位置 - 但是，我无法弄清楚如何将所有其他项目向上移动并将它们设置为位置。我花了好几个小时在周末搞乱各种代码 - 但是无法让它发挥作用。

以下是JS小提琴的链接：

http://jsfiddle.net/cadud/

正如你所看到的那样 - 我在第一个开始时得到一个奇怪的聚束，并且没有一个类被添加到中间（第三个）元素。

Answer 1

这里是jquery插件Roundabout演示

和源代码位于github

Answer 2

我已经实现了使用动画重新安排列表项。要求是我有五个要素：

5   4   1   2  3

并重新排列顺序，当点击第一个元素时，它将位置放在中心，如下所示：

$('.horizontal li').on('click', function (e) {
    $(this).addClass('active').siblings().removeClass('active');
    var tparent = $(this).parent();
    var childs = tparent.children().length;
    var eachWidth = this.clientWidth + 10;
    var middle = eachWidth * (parseInt(childs / 2));
    var rowChild = $(this).parent().children('li');
    var currentIndex = rowChild.index($(this));

    rowChild.each(function (li) {
        if ($(this).attr("POS")) {
            cp = $(this).attr("POS");
        } else {
            $(this).attr("POS", li);
        }
    });

    function animateEach() {
        rowChild.each(function (li) {
            var _minePos = $(this).position().left;
            var cp = $(this).attr("POS");
            var _newPos = cp * eachWidth;

            $(this).animate({
                left: (cp - li) * eachWidth,
            }, 40, function () {
                // checkPOS();
            });
        });
        setTimeout(checkPOS(true), 40);
    }

    var currentelement = $(this);
    var currentIIN = $(this).attr("POS");

    function checkPOS(ee) {
        if (currentIIN != 2) {
            rowChild.each(function (li) {
                var eachPOS = $(this).attr("POS");
                if (eachPOS >= 4) {
                    $(this).attr("POS", 0);
                } else {
                    $(this).attr("POS", parseInt(eachPOS) + 1);
                }
            });
            currentIIN = currentelement.attr("POS");
            animateEach();
        } else {
            if (ee) currentelement.addClass('active');

        }
    }

    checkPOS();

你可以检查我的小提琴：Jsfiddle

p {
    margin: 1px;
    cursor: pointer;
}
li {
    cursor: pointer;
}
ul.horizontal {
    clear: both;
    display: block;
    height: 40px;
}
ul.horizontal li {
    float: left;
    /*background: #ccc;*/
    display: block;
    margin-left: 10px;
    padding: 5px;
    position: relative;
}
.ul.horizontal .li.a {
    border:2px solid #fb7d1e;
    font-size: 50px;
}
.horizontal li.active {
    /*background:silver;*/
    font-weight:bold;
    color:blueviolet;
    font-size: 20px;
    /*height: 150px;*/
    /*width:150px;*/
    webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    /*border:1px solid ;*/
    /*border-radius: 1em;*/
    -webkit-box-shadow: 0 58px 36px -56px #7ac9ff;
    -moz-box-shadow: 0 58px 36px -56px #7ac9ff;
    box-shadow: 0 58px 36px -56px #7ac9ff;
}
/*background: #ccc;*/
 display: block;
 margin-left: 10px;
 padding: 5px;
 position: relative;

}
.ul.horizontal .li.a {
    border:2px solid #fb7d1e;
    font-size: 50px;
}
.horizontal li.active {
    /*background:silver;*/
    font-weight:bold;
    color:blueviolet;
    font-size: 20px;
    /*height: 150px;*/
    /*width:150px;*/
    webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    /*border:1px solid ;*/
    /*border-radius: 1em;*/
    -webkit-box-shadow: 0 58px 36px -56px #7ac9ff;
    -moz-box-shadow: 0 58px 36px -56px #7ac9ff;
    box-shadow: 0 58px 36px -56px #7ac9ff;
}

{{1}}

检查我的Jsfiddle

使用Jquery转移重新排序列表项

2 个答案: