作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我制作了一个 onkeydown 函数,它水平运行 li 元素 block ,它运行完美,但我需要当第一个和最后一个 li block 处于焦点时,左右键应该被禁用。
有人能建议一个正确的方法吗?提前感谢!!!
$(document).ready(function() {
var winht = $(window).height();
var contUl = $('.content ul').children('li').size();
var widLi = $('.content ul li').width();
var contUlAndLI = contUl * widLi;
var leftIndex = $('.content ul').css('left','0');
$('.content ul').width(contUlAndLI);
$('#frame').height(winht);
$("body").keydown(function(e) {
if(e.keyCode == 37) { // left
$(".content ul").animate({
left: "-=980"
});
}
else if(e.keyCode == 39) { // right
$(".content ul").animate({
left: "+=980"
});
}
});
if( leftIndex == 0){
$("body").keydown(function(e) {
if(e.keyCode == 39){ // right
//event.preventDefault();
return false;
}
});
}
});
工作引用号是jsfiddle
最佳答案
我通过使用一个计数器来做到这一点,每次用户按左或右键时都会检查该计数器的值。计数器只是 ul
标记内的 li
元素的数量。
var ulCount = $('.content li').length - 1;
var i = 0;
然后仅当我们在计数器的值范围内时才运行动画:
if(e.keyCode == 37) { // left
if (i < ulCount) {
i++;
$(".content ul").animate({
left: "-=980"
});
}
}
else if(e.keyCode == 39) { // right
if (i > 0) {
i--;
$(".content ul").animate({
left: "+=980"
});
}
}
我更新了 jsFiddle也是。
关于jquery - 禁用第一个和最后一个元素的 keyCode,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13701047/
我是一名优秀的程序员,十分优秀!