我做了DEMO，请查看显示所有评论及其时间的表格。
视频开始播放后，随着时间的流逝，它开始显示每个评论。
我面临的问题是它不会跳转到表格中的正确行（表格有点像textarea）
它来回移动，并且不会瞄准。
我希望每次弹出每个注释时，在表格的顶部位置显示正确的行。
它应该滚动，并遵循表格中当前注释的行。
我怎样才能解决这个问题？谁能修改和更新我的jsfiddle？
Java脚本
var row= '';
jQuery(document).ready(function () {
var fixedTime = 0;
$('#video').on('timeupdate',function(e){
if(this.currentTime.toFixed() != fixedTime){
showComments(fixedTime);
fixedTime = this.currentTime.toFixed()
}
});
});
var comments = [
{'time':'10','message':'hello! 10 secs has past'},
{'time':'11','message':'hello! 11 secs has past'},
{'time':'10','message':'hello! 10-2 secs has past'},
{'time':'5','message':'hello! 5 secs has past'},
{'time':'20','message':'hello! 20 secs has past'},
{'time':'21','message':'hello! 21 secs has past'},
{'time':'20','message':'hello! 20-2 secs has past'},
{'time':'25','message':'hello! 25 secs has past'},
{'time':'30','message':'hello! 30 secs has past'}
];
function showComments(time){
var coms = findComments(time);
if(coms[0]){
$('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600).fadeOut(100);
$('.newsticker').append("<p style='margin-left:400px;opacity:0'>"+coms[0].message+"</p>");
$('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);
var row = "tr.comment" + time;
$("tr").css("background-color","#ffffff");
jQuery(row).each(function() {
$(this).css("background","#87cefa");
$('div#container').animate({
scrollTop: jQuery(this).offset().top
}, 500);
});
}
}
function findComments(time){
return $.grep(comments, function(item){
return item.time == time;
});
}
的HTML
<body>
<div class="newsticker">
</div>
<br />
<br />
<video id="video" width="320" height="180" controls="controls" autoplay="autoplay" name="media"><source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></video>
</body>
<div id="container" style="border:solid 1px;height:70px; width:500px; overflow-y:scroll;">
<table border="0" height="100" width="400">
<tr class="comment5">
<td>00:00:05</td>
<td>hello! 5 secs has past</td>
</tr>
<tr class="comment10">
<td>00:00:10</td>
<td>hello! 10 secs has past</td>
</tr>
<tr class="comment10">
<td>00:00:10</td>
<td>hello! 10-2 secs has past</td>
</tr>
<tr class="comment11">
<td>00:00:11</td>
<td>hello! 11 secs has past</td>
</tr>
<tr class="comment20">
<td>00:00:20</td>
<td>hello! 20 secs has past</td>
</tr>
<tr class="comment20">
<td>00:00:20</td>
<td>hello! 20-2 secs has past</td>
</tr>
<tr class="comment21">
<td>00:00:21</td>
<td>hello! 21 secs has past</td>
</tr>
<tr class="comment25">
<td>00:00:25</td>
<td>hello! 25 secs has past</td>
</tr>
<tr class="comment30">
<td>00:00:30</td>
<td>hello! 30 secs has past</td>
</tr>
</table>
</div>
的CSS
div.newsticker{
border:1px solid #666666;
width:100%;
height:50px;
}
.newsticker p{
float:left;
position:absolute;
}
最佳答案
我不知道为什么，但是offset().top为注释行提供的值太大而无用……它们只会使div一直向下滚动。
我将其替换为DOM属性offsetTop，它似乎可以正常工作：
$('div#container').animate({
scrollTop: this.offsetTop
}, 500);
http://jsfiddle.net/9zqhF/19/