mat*_*ewb 8 jquery jquery-plugins jquery-selectors
我已经做了一个onkeydown函数,它运行li元素块水平运行完美但我需要当第一个和最后一个li块聚焦时,左右键应该被禁用.
有谁能建议一个正确的方法?Thanx提前!!!
$(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;
}
});
}
});
Run Code Online (Sandbox Code Playgroud)
工作参考是jsfiddle
我通过使用一个计数器来做到这一点,每次用户按左或右键时都会检查该计数器的值。计数器只是标签li内元素的数量ul。
var ulCount = $('.content li').length - 1;
var i = 0;
Run Code Online (Sandbox Code Playgroud)
然后仅当我们在计数器的值范围内时才运行动画:
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"
});
}
}
Run Code Online (Sandbox Code Playgroud)
我也更新了jsFiddle。