javascript - 長さ検出を備えた水平テキストスクローラー

Question

テキストの長さがコンテナー DIV よりも長い場合にのみスクロールする水平テキスト スクロールを行う方法を探しています。それを行う方法について何か提案はありますか？

Answer 1

これを試して：

CSS

.container { width: 600px; background: #ccc; }
.ticker { white-space: nowrap; }

HTML

<div class="container">
<span class="ticker">Some short text that isn't greater than the browser window</span>
<span class="ticker">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis metus quis augue facilisis elementum. Pellentesque aliquet congue tristique. Phasellus feugiat cursus lobortis. Cras et massa odio, et vehicula nisi. Donec adipiscing condimentum diam sed hendrerit. Curabitur eros elit, aliquet et aliquam id, facilisis id nisi. Vivamus dictum commodo libero, eu venenatis nulla sodales in. Maecenas rhoncus, dui at sollicitudin scelerisque, neque lectus viverra metus, vel elementum nisl ante quis mi. Cras sagittis enim ac arcu scelerisque tristique vel in dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vehicula leo vel lacus blandit ut adipiscing lorem sodales.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis metus quis augue facilisis elementum. Pellentesque aliquet congue tristique. Phasellus feugiat cursus lobortis. Cras et massa odio, et vehicula nisi. Donec adipiscing condimentum diam sed hendrerit. Curabitur eros elit, aliquet et aliquam id, facilisis id nisi. Vivamus dictum commodo libero, eu venenatis nulla sodales in. Maecenas rhoncus, dui at sollicitudin scelerisque, neque lectus viverra metus, vel elementum nisl ante quis mi. Cras sagittis enim ac arcu scelerisque tristique vel in dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vehicula leo vel lacus blandit ut adipiscing lorem sodales. Vestibulum ultricies elementum mattis. Maecenas sit amet turpis magna. Phasellus posuere mi nec nisi sodales non dapibus nibh faucibus. Vestibulum leo tellus, blandit sed auctor id, faucibus quis sem. Sed at purus quam. Praesent eget ante sem, a scelerisque nulla. Praesent id quam sit amet eros viverra euismod. Integer volutpat vulputate aliquam. Aliquam convallis dolor tellus, in cursus justo. Donec molestie consequat dolor. Nunc imperdiet arcu et justo vehicula mollis. Suspendisse id molestie velit. Morbi sed est arcu, non aliquam augue.</span>
</div>

脚本

$(document).ready(function(){
 var tickerWidth = '100%'; // add '%' or 'px' to this variable
 var tickerSpeed = 10; // 0 = stopped, 30 = almost too fast
 var tickerDelay = 0; // delay in ms
 var tickerDirection = 'left'; // options = left, right (up & down work as well, but not the way you want)
 var tickerMouseoverPause = true;
 var tickerLoopTimes = 0; // 0 = infinite # of loops

 $('.ticker').each(function(){
  if ( $(this).width() >  $(this).parent().width() ) {
   var marq = $('<marquee></marquee>').attr({
    'behavior' : 'scroll',
    'scrollamount' : tickerSpeed,
    'direction' : tickerDirection,
    'width' : tickerWidth
   })
   if (tickerLoopTimes != 0) {
    marq.attr('loop', tickerLoopTimes) 
   }
   if (tickerMouseoverPause) {
    marq.attr({
     'onmouseover' : 'this.stop()',
     'onmouseout' : 'this.start()'
    })
   }
   $(this).wrap(marq);
  }
 })
})

このスクリプトは基本的にテキストを で囲みます。属性の詳細については、このサイト<marquee>をご覧ください。

注:マーキーを使用して、目立たないjQueryを使用してみhoverましたが、機能しません。しかし、インラインmouseoverとmouseoutイベントをタグに追加すると、完全にうまく機能します。

Answer 2

ここに素敵なものがあります

JavaScript Bs_ScrollableDiv