在无序列表中查找对称元素

Question

考虑以下情况：

<ul>
    <li></li>
    <!-- the minimum amount is at least 7 elements -->
</ul>

设li元素的索引为1 2 3 4 5 6 7

在这种情况下，中间元素是 4。如果我将鼠标悬停在 5、6、7 上，我希望隐藏子列表的第一个元素，并显示列表的下一个元素（如果存在）。

所以如果列表是 1 2 3 4 5 6 7 当我悬停 5 6 7 它变成 2 3 4 5 6 7 8（索引为 8 的元素出现，索引为 1 的元素显示：none）现在中间元素变为 5（middleIndex++ 如果 hoveredIndex > middleINdex）现在，如果我将鼠标悬停在 2 3 4 上，列表 returns 将恢复到原始状态 1 2 3 4 5 6 7.

我现在有的是：

$('ul li').mouseover(function()
{
    var middleIndex = 3;
    var index= $(this).parent().children().index(this);
    if(index > middleIndex)
    {
        // pseudo code
        firstElementOfSublist.hide();
        followingElementOfSublist.show();
        //how do I find the last element of the sublist?
        //how do I find the first element of the sublist?
    }
}

这是一个 JSFiddle link：http://jsfiddle.net/hrapua2y

Answer 1

这是我想出的解决方案。

  $(document).ready(
    function() {
      var middleIndex = 3;
      var maxIndex = $("ul li").length - 1;
      var minIndex = 0;

      $('ul#reel li').mouseover(function() {
        var index = $(this).parent().children().index(this);

        var tempIndex;
        var showIndex;
        var visibleRows = $("ul li:visible").length;

        if (index > middleIndex && visibleRows == 7) {
          tempIndex = middleIndex - 3;
          showIndex = middleIndex + 4;

          if (tempIndex <= maxIndex && showIndex <= maxIndex) {
            $("ul li:eq(" + tempIndex + ")").hide(500);
            $("ul li:eq(" + showIndex + ")").show(500);
            middleIndex++;
          }
        } else if (index < middleIndex) {
          tempIndex = middleIndex + 3;
          showIndex = middleIndex - 4;

          if (tempIndex <= maxIndex && showIndex >= minIndex) {
            $("ul li:eq(" + tempIndex + ")").hide("slow");
            $("ul li:eq(" + showIndex + ")").show("slow");
            middleIndex--;
          }
        }
      });
    });

 * {
   margin: 0;
   padding: 0;
 }
 ul {
   list-style: none;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -375px;
   margin-top: -75px;
 }
 ul li {
   display: inline-block;
   width: 100px;
   height: 100px;
   background: black;
   color: white;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="reel">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li style="display: none;"></li>
 <li style="display: none;"></li>
 <li style="display: none;"></li>
</ul>

Fiddle

Answer 2

希望这就是您要找的。

$(document).ready(function () {
    var elementsVisible = 7; // elements that are displayed in the list
    var maxElements = 10; // max elements in the list
    var middleIndex = (elementsVisible - 1) / 2; // the logic is for odd number of elements
    var startStack = maxElements - elementsVisible;
    var endStack = 0; // presuming that first elements are shown initially
    var lock = false;
    var lockTime = 10; // how fast to show/hide elements
    $('ul#reel li').mouseover(function () {
        var index = $(this).parent().children().index(this);
        if (index > middleIndex && endStack < 3 && !lock) {
            $('ul#reel li:eq(' + (endStack + elementsVisible) + ')').css("display", "inline-block");
            $('ul#reel li:eq(' + endStack + ')').css("display", "none");
            middleIndex++;
            startStack--;
            endStack++;
            lock = true;
            setTimeout(function () {
                lock = false;
            }, lockTime);
        } else if (index < middleIndex && startStack < 3 && !lock) {
            $('ul#reel li:eq(' + (endStack - 1) + ')').css("display", "inline-block");
            $('ul#reel li:eq(' + (endStack + elementsVisible - 1) + ')').css("display", "none");
            middleIndex--;
            startStack++;
            endStack--;
            lock = true;
            setTimeout(function () {
                lock = false;
            }, lockTime);
        }
    });
});

* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
    position:absolute;
    left:50%;
    top:50%;
    margin-left: -375px;
    margin-top: -75px;
}
ul li {
    display: inline-block;
    width: 100px;
    height: 100px;
    color: red;
    font: 25px sans-serif;
    text-align: center;
    vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
    <ul id="reel">
        <li style="background: #000">1</li>
        <li style="background: #333">2</li>
        <li style="background: #666">3</li>
        <li style="background: #999">4</li>
        <li style="background: #ccc">5</li>
        <li style="background: #ccc">6</li>
        <li style="background: #999">7</li>
        <li style="display: none; background: #666">8</li>
        <li style="display: none; background: #333">9</li>
        <li style="display: none; background: #000">10</li>
    </ul>
</body>

jsFiddle

在无序列表中查找对称元素

Finding the symmetric element in unordered list

html

javascript

css

jquery

jquery-animate