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 ++ if hoveredIndex＆gt; 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

Answer 1

我希望这就是你要找的东西。

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

Answer 2

这是我提出的解决方案。

＆＃13;

./Fabric.framework/run <YourAPIKey> <YourBuildSecret>

＆＃13;

		$(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--;
		        }
		      }
		    });
		  });

＆＃13;

	* {
	  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;
	}

＆＃13;

Fiddle

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

2 个答案: