2

我写了一个基于 jQuery 的小滑动脚本。要记住哪个幻灯片当前处于活动状态并在重新加载时恢复此幻灯片，将location.hash更新。在 Chrome 中，这工作得很好。在 Opera 和 Firefox 中，动画显示了一些奇怪的行为。尽管 CSS 属性已更新为正确的值，但在两张幻灯片之间滑动结束。此行为仅在location.hash更新属性时出现。

结合这两种机制时是否存在已知的并发症？我真的无法想象它们是如何相互影响的。

相关的 JavaScript 代码：

var currentPage = 0;
var lock = false;
var transitionTime = 500;

function changePage( direction ) {
    if( lock )
        return;

    var currIndex = currentPage;
    var nextIndex = currentPage + direction;

    var cPage = $( '#page' + currIndex );
    var nPage = $( '#page' + nextIndex );

    if( cPage.length == 0 || nPage.length == 0 )
        return;

    // Set lock
    lock = true;

    // Animate scrolling container
    var newPosition = -800 * nextIndex;
    $( '#scroller' ).animate( {
        left: newPosition
    }, transitionTime, function() {
        // Remove lock
        lock = false;
    } );

    currentPage = nextIndex;
    location.hash = 'page' + nextIndex;
}

jsFiddle从地址栏中 删除/show/以访问 jsFiddle 编辑页面。导航是通过箭头键完成的。

4

1 回答 1

2

div经过测试，当滚动条向左移动时，包装器似乎向左移动了一点div。将包装器的位置更改为div，fixed它将解决您的问题。

div#wrapper {
    height: 220px;
    left: 50%;
    margin-left: -375px;
    margin-top: -150px;
    position: fixed;
    top: 50%;
    width: 680px;
}

快乐编码！这是示例小提琴。

于 2013-01-08T23:57:30.437 回答