个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
考虑以下情况:
<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++ 如果 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
最佳答案
希望这就是您要找的。
$(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>关于javascript - 在无序列表中查找对称元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33503563/
25
4
0
我在 GlassFish (J2EE_1.4) 上的 NetBeans 中开发企业项目。我的项目中有一些实体 bean、一些 session bean 和消息驱动 bean。我以如下方式使用 serv
什么在速度方面更好...... 我正在尝试确定用户是否已将某个 URL 添加到他们的快捷方式列表中。如果他们添加了 URL，页面上就会有一个链接，用于从快捷方式中删除该页面，否则他们可以将其添加到快捷
我的问题如下： 我打开一个Excel-File，但我不知道我的客户在模板文件中使用了哪些可能的标头变量。它们可以是：＃DATE，＃TIME，＃NAME等。因此，我需要查找这些变量，以及是否已使用过：替
我有一堆以“-e”结尾的文件要删除。 $ find . -name "*-e" exec rm {} \; find: exec: unknown primary or operator 正则表达式是
我有一个简单的问题:是否可以在 TypeScript 中获取联合的一部分的类型？ 例如，您可以经常使用如下查找类型: interface Person { name: string; } type
我正在尝试设置 Point Cloud Library启用 CUDA 选项的主干构建。 我相信我已经按照 these instructions 正确安装了 CUDA . 在 PCL 构建的 cmake
我将首先说我所知道的唯一 VBA 是操作录制的宏的反复试验。我是一名注册会计师，试图以艰难的方式学习 VBA(并希望我去学校学习计算机编程!)。 我有带有多个工作表的大型工作簿。 G 列中以黄色突出显
当文件数达到阈值时，我试图删除目录中最旧的文件。 list_of_files = os.listdir('log') if len([name for name in list_of_files
我有一个数组，它有一些重复的值。 我必须计算每个重复项的数量及其索引。 打印如: Index of b: 1 Index of b: 4 Index of c: 2 Index of c: 3 Ind
我已经搜索了我的问题的解决方案，但没有成功。热键 ctrl+F 找到的 eclipse 查找/替换功能不起作用。注意:通过 Eclipse 菜单 Edit>Find Replace(不工作我的意思是
我想检查 div 是否包含类为“error”的子级，但条件是错误类显示不等于无。 (意味着错误类必须可见。 如何更改我的以下代码: $(".related_field").each(function
这个问题已经有答案了: 已关闭13 年前。 Possible Duplicate: Can jQuery provide the tag name? 嗨! 这个问题太基础了，我不好意思问，但我尝试了
我一直听说这是 cygwin 的路径问题。它阻止了 emacs 在我的 cygwin 中工作。当我在 cli(不是 bash/cygwin)上执行 find 时，无论我输入什么，我都会得到同样的错误。
我正在使用此变量来获取一个或多个与我需要的值相匹配的值。 var mail = $("#dat").contents().find("td:contains('" + name + "')" ).si
请原谅这个长问题。我只是不确定解决这个问题的最佳方法是什么。 我有一个电子表格(Google 表格)，其中包含用户和地址列表，我需要从中创建邮寄标签。该电子表格是从我们的学生信息系统导出的。这些地址应
我正在 Excel VBA 中创建一个公式，以解析单元格中以逗号分隔的“部分”列表。在另一个工作表中查找具有该零件名称的单元格，然后使用找到的该单元格的地址来获取同一行不同列的零件成本。我为此工作了数
我被要求在网络应用程序上实现一些电子邮件地址验证 - 我确信我们都已经经历过一千次了...但是，这一次我被要求在域上进行 MX 查找查看它是否接受电子邮件。 有人知道这样做有任何潜在的问题吗？ mx
我有一个切换按钮，可读取.wave文件，并且字符串更改为暂停，然后..... 我的问题是，当用户播放声音时，按钮字符串更改为暂停，结束声音后，该字符串仍为暂停状态，我想将其更改为播放。但是我不知道如何
对于令人困惑的标题提前表示歉意。我的问题如下，我在大约 600 个文件中有以下文本: $_REQUEST['FOO'] 我想将其替换为以下内容: $this->input->post('FOO') 为
我正在使用 Ansible 的查找功能查找 INI 文件中的值。这是文档中的示例: - debug: msg="User in integration is {{ lookup('ini', 'use
我是一名优秀的程序员,十分优秀！