3

見出しが一方の側からもう一方の側にスライドする無限ループを作成しました。そして、見出しが最後に達すると、最後にキューに入れられます。

問題は、私の見出しの幅が異なることです。これは、アニメーション速度が異なるスライダーで終わります。多分私は私の設定が間違っていますが、これは私のコードです：

HTML：

<header>
  <div id="spotlight">
    <span class="active">Foo</span>
    <span>Baaaar</span>
    <span>Baaz</span>
    <span>baz</span>
    <span>qux</span>
    <span>quux</span>
    <span>corge</span>
    <span>grault</span>
    <span>garply</span>
    <span>waldo</span>
  </div>
</header>

CSS：

body {
    background: #000;
}

header {
    border-bottom: 8px solid white;
    height: 300px;
    margin-bottom: 4%;
    overflow: hidden;
    position: relative;
}
header #spotlight {
    left: 0;
    position: absolute;
    width: 1100%;
}
header #spotlight span {
    color: white;
    display: block;
    float: left;
    font-size: 6em;
    font-weight: 900;
    margin-top: 1%;
    text-transform: uppercase;
}
header #spotlight span {
    margin-left: 30px;
}
header #spotlight span:not(:last-child):after {
    content: "•";
    margin-left: 30px;
}

JS：

$(window).load(function(){
        animate_spotlight();
});

function animate_spotlight(){
    var $current_spot = $('#spotlight span.active')
    var pos = $current_spot.next().position().left;
    $('#spotlight').stop().animate({
        left : '-' + pos + 'px'
    }, {easing : 'linear', duration : 3000, complete : function(){
        $current_spot.next().addClass('active'); // Fetch new object
        $current_spot.appendTo('#spotlight'); // Put the old object last in #spotlight elem.
        $('#spotlight').css({left : 0 + 'px'}) // Reset the position
        $current_spot.removeClass('active'); // Removes active class of the old elem.
        animate_spotlight(); // Loop
    }});
}

JS FIDDLE http://jsfiddle.net/7BMaF/2/

4

2 に答える 2

1

変数を追加してこれを修正し、速度を計算するためのソースとして使用しました。

var divide_to_get_time = (pos / 10000) * 50000;

そして、その変数を期間に入れます。

最終コード：

function animate_spotlight(){
    var $current_spot = $('#spotlight span.active')
    var pos = $current_spot.next().position().left;

    var divide_to_get_time = (pos / 10000) * 50000;

    $('#spotlight').stop().animate({
        left : '-' + pos + 'px'
    }, {easing : 'linear', duration : divide_to_get_time, complete : function(){
        $current_spot.next().addClass('active');
        $current_spot.appendTo('#spotlight');
        $('#spotlight').css({left : 0 + 'px'})
        $current_spot.removeClass('active');
        animate_spotlight();
    }});
}
于 2013-03-13T09:31:25.487 に答える
1

期間を変更する方法を見つけます。この場合、各スパンの幅を1000で割り、それを期間（この場合は8000）で乗算しました。

http://jsfiddle.net/axrwkr/7BMaF/4

function animate_spotlight(){
    var $current_spot = $('#spotlight span.active')
    var pos = $current_spot.next().position().left;

   var wid = $current_spot.width();
   var dur = (wid / 1000) * 8000;

    $('#spotlight').stop().animate({
        left : '-' + pos + 'px'
    }, {easing : 'linear', duration : dur, complete : function(){
    $current_spot.next().addClass('active');
    $current_spot.appendTo('#spotlight');
    $('#spotlight').css({left : 0 + 'px'})
    $current_spot.removeClass('active');
    animate_spotlight();
    }});
}
于 2013-03-13T09:37:55.627 に答える