在无序列表中找到对称元素答案

【问题标题】：Finding the symmetric element in unordered list在无序列表中找到对称元素
【发布时间】：2015-11-03 15:57:41
【问题描述】：

考虑以下情况：

<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 的元素显示：无）现在中间元素变为 5 (middleIndex++ if hoveredIndex > middleINDex) 现在，如果我将鼠标悬停在 2 3 4 上，列表将恢复到原来的状态 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 链接：http://jsfiddle.net/hrapua2y

【问题讨论】：

我刚刚有了一个想法：因为我们总是知道索引，所以 index-3 将是第一个元素的索引， index +3 将是最后一个元素的索引（子列表的大小固定为7）。现在的问题是，我如何将元素向左或向右移动（动画）以填充 display: none; ?

标签： javascript jquery html css jquery-animate

【解决方案1】：

我希望这就是你要找的。p>

$(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

【讨论】：

【解决方案2】：

这是我想出的解决方案。

		$(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

【讨论】：