0

我正在以本网站的方式创建一个带有滑动面板的 UI：http: //smithandhawken.catalogs.target.com/#/intro-cover

不过，我有两种方法可以按列和按行更改页面。用户可以使用键盘以及一些视觉元素来导航页面。运动由如下函数处理：

function moveDown()
{
unbindAll();
currentPage = 1;

$('div.section').each(function(index, element) {
    if(index+1 == currentSec) {
        console.log($(this));
        $(this).css({ 'margin-top': 0, 'z-index': (storyCount-1)*100 });
        if($(this).next().size()) {
            populate(currentSec+1, currentPage);
            $(this).next().children('div.page').css('left', $(window).width());
            $(this).next().children('div.page').eq(0).css('left', 0);
            console.log(storyCount);
            $(this).next().css({ 'margin-top': $(window).height(), 'z-index': storyCount*100 }).stop().animate({marginTop:0}, 500, function() { 
                currentSec++;
                bindAll();
            });
        }
        else {
            populate(1, currentPage);
            $(this).parent().children().first().children('div.page').css('left', $(window).width());
            $(this).parent().children().first().children('div.page').eq(0).css('left', 0);
            $(this).parent().children().first().css({ 'margin-top': $(window).height(), 'z-index': storyCount*100 }).stop().animate({marginTop:0}, 500, function() {
                currentSec = 1;
                bindAll();
            });
        }
    }
    else if(index != currentSec) {
        $('#section'+(index+1)).css({ 'margin-top': 0, 'z-index': 100 });
    }
    });
}

上面那行在 100% 的情况下不会以同样的方式工作 - $(this).css({ 'margin-top': 0, 'z-index': (storyCount-1)*100 });

当用户使用键盘和左/右视觉元素时，一切正常。当他们使用在每一行之间转换的可视元素（仅限 up/down 方法）时，函数会触发，但并非所有 CSS 属性都被应用。这是我正在谈论的视觉元素的功能：

function mdlButton(btnHit)
{
btnLabel = btnHit.attr('id').substr(3);
console.log('enter first swtich '+currentSec);
switch(currentSec)
{
    case 1:
        console.log('enter second switch '+btnLabel);
        if (btnLabel == 1) {
            console.log('dont do anything');
        }
        else if (btnLabel == 2) {
            console.log('move down one');
            moveDown();
        }
        else if (btnLabel == 3) {
            console.log('move down two');
            moveDown();
            moveDown();
        }
        break;
    case 2:
        console.log('enter second switch');
        if (btnLabel == 1) {
            console.log('move up');
            moveUp();
        }
        else if (btnLabel == 2) {
            console.log('dont do anything');
        }
        else if (btnLabel == 3) {
            console.log('move down one');
            moveDown();
        }
        break;
    case 3:
        console.log('enter second switch');
        if (btnLabel == 1) {
            console.log('move up two');
            moveUp();
            moveUp();
        }
        else if (btnLabel == 2) {
            console.log('move up');
            moveUp();
        }
        else if (btnLabel == 3) {
            console.log('dont do anything');
        }
        break;
}

if(!btnHit.hasClass('mdlSelected')) {
    $('div.mdlSec').removeClass('mdlSelected');
    $('div.mdlSec').find('#selected').remove();
    btnHit.addClass('mdlSelected');
    btnHit.find('div.divider').after('<div id="selected"></div>');
    reSize();
}
}

我无法弄清楚从上述函数调用时 z-index 不会改变的原因，而不仅仅是键盘或左/右调用 moveDown()/moveUp() 方法时。以防万一，这是左/右的样子：

function moveLeft()
{
unbindAll();
$('#section'+currentSec+' div.page').each(function(index, element) {
    if(index+1 == currentPage) {
        if($(element).prev().size()) {
            populate(currentSec, currentPage-1);
            $(this).animate({'left': $(window).width()}, 500, function() {
                currentPage--;
                bindAll();
            });
        }
        else {
            moveUp();
        }
    }
    });
}

任何帮助将非常感激！谢谢

4

1 回答 1

0

z-index 被 reSize() 函数重置为另一个值，该函数被调用来调整页脚按钮的大小。我已经分离了调整大小的功能，问题就消失了。代码本身没有问题，只是执行顺序。

感谢所有的帮助！

于 2012-09-18T19:08:40.283 回答