2

歌詞を含むテーブルがあります。平均して、曲には 30 行ほどの行がありますが、一度にすべての行をページの下に表示したくないので、overflow:scroll プロパティを使用してテーブルを div に配置しました。

やりたいことは 2 つあります。一度に div に 4 行または 5 行 (テーブル行) を表示し、曲の進行に合わせて div を下にスクロールして、現在再生中の行が div の一番上にくるようにします。

コードはプロパティ scrollTop と offsetHeight を使用すると思いますが、すべてをまとめる方法がわかりません。

ここにテーブルがあります: jsFiddle

<div id="divlyrics" class="lyrics">
 <table>  
     <tr id="row_0">
    <td>
     <p id="lyric_0" class="lyric_line">
Song lyrics line 1<br>
     </p>
    </td>
   </tr>     
   <tr id="row_1">
    <td>
     <p id="lyric_1" class="lyric_line">
Song lyrics line 2<br>
     </p>
    </td>
   </tr>
   <tr id="row_2">
    <td>
     <p id="lyric_2" class="lyric_line">
Song lyrics line 3<br>
     </p>
    </td>
   </tr>
   <tr id="row_3">
    <td>
     <p id="lyric_3" class="lyric_line">
Song lyrics line 4<br>
     </p>
    </td>
   </tr>   
   <tr id="row_4">
    <td>
     <p id="lyric_4" class="lyric_line">
Song lyrics line 5<br>
     </p>
    </td>
   </tr>   
   <tr id="row_5">
    <td>
     <p id="lyric_5" class="lyric_line">
Song lyrics line 6<br>
     </p>
    </td>
   </tr>
  </table>
 </div>

CSS:

.lyrics{
 font-family:Arial;
 overflow:scroll;
}

.lyric_line{
 border:solid 1px;
 text-align:center;    
}

(実際のテーブルには少なくとも 2 つの行があります。1 つの行は「Line x」のみを表示し、もう 1 つの行は 3 つの異なる形式で歌詞を表示します: 曲の元の言語、音訳、および別の言語への翻訳)。

4

3 に答える 3

6 
function doScroll(){
   $('#divlyrics').scrollTop($('#divlyrics').scrollTop() + 10);
}

setInterval(doScroll, 500);

作業例http://jsfiddle.net/wrGnu/7/

于 2012-07-30T01:43:30.850 に答える
2

これは、Trinh Hoang Nhu によって書かれた短いバージョンです。彼がjQueryを使用したため、通常はコードが長くなり、遅くなります。

function doScroll(){
   document.getElementById('divlyrics').scrollTop += 10;
}

setInterval(doScroll, 500);
于 2012-07-30T04:58:43.110 に答える
2

:eq(#) セレクター サフィックスを使用して、必要なテーブルの行を取得し、その行の y 位置またはオフセットまでスクロールすることもできます。

次のようになりますが、この特定のコードを試したりテストしたりしていないことに注意してください。

<div id="scrollContainer">
<table id="scrollTable">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>etc</td>
  </tr>
</table>
</div>

<script type="text/javascript">
var currentRow = 0;
function getRow(rowNum) {
  return parseInt($('#scrollTable tr:eq('+rowNum+')').position().top);
}
$(document).ready(function(){
  var end = $('#scrollTable tr').length;
  $('#scrollContainer').animate({height:"100px",overflow:"scroll"},'fast',function() {
    var t = setInterval(function() {
      $('#scrollContainer').scrollTop(getRow(currentRow));
      if (++currentRow >= end) clearInterval(t);
    }, 500);
  });
});
</script>
于 2012-07-30T03:17:01.207 に答える