jquery marqueeスクロールを右から左の代わりに上から下へ

Question

右から左にではなく、上から下にマーキーのスクロールを行いたいと思います。

私はjqueryの.animateを使用していますが、私はそれはあなたがにそれを調整する必要が

jQuery(document).ready(function($) { 
 
    var marquee = function() { 
 
    var window_width = window.innerWidth; 
 
    var speed = 12 * window_width; 
 
    $('#marquee li:first').animate({left: '-980px'}, speed, 'linear', function() { 
 
     $(this).detach().appendTo('#marquee ul').css('', "100%"); 
 
     marquee(); 
 
    }); 
 
    }; 
 
    if ($("#marquee li").length > 1) { 
 
    marquee(); 
 
    } 
 
});

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
#marquee { 
 
    background: #090; 
 
    font-family: Arial, Verdana, sans-serif; 
 
    color: #FFF; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    line-height: 20px; 
 
    width: 1035px; 
 
} 
 

 
#marquee ul { 
 
    width: 100%; 
 
    height: 20px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
#marquee li { 
 
    width: 980px; 
 
    line-height: 20px; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 100%; 
 
    text-align: center; 
 
    list-style: none; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="marquee"> 
 
\t <ul> 
 
    <li>test 1</li> 
 
    <li>test 2</li> 
 
    </ul> 
 
</div>

Answer 1

を左に移動右に代わりにスクロールさせる方法を把握することができますスニペットをオンラインで泉XではなくYで作業するので、高さの幅を切り替えると、固定または絶対の位置にする必要があるため、ウィンドウの高さ全体にわたっています。

$(document).ready(function($) { 
    var marquee = function() { 
    var window_height = window.innerHeight; 
    var speed = 12 * window_height; 
    $('#marquee li:first').animate({top: '100%'}, speed, 'linear', function() { 
     $(this).detach().appendTo('#marquee ul').css('', "100%"); 
     marquee(); 
    }); 
    }; 
    marquee(); 
}); 

---

html, 
body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 

#marquee { 
    background: #090; 
    font-family: Arial, Verdana, sans-serif; 
    color: #FFF; 
    font-size: 12px; 
    text-align: center; 
    font-weight: bold; 
    line-height: 20px; 
    width: 100px; 
    position:fixed; 
    top:0; 
    bottom:0; 
    left:0; 
} 

#marquee ul { 
    width: 100%; 
    padding:0; 
    margin:0; 
    height:100%; 
} 

#marquee li { 
    width: 100px; 
    line-height: 20px; 
    height: 20px; 
    position: absolute; 
    top: 0px; 
    left: 0; 
    text-align: center; 
    list-style: none; 
    font-size:14px; 

} 

の作業例 - https://jsfiddle.net/7sunt6fz/1/