Question

我制作了DEMO，请参阅显示所有评论及其时间的表格。

当视频开始播放时，它开始显示每个评论视频经过的时间。

我面临的问题是它不会跳到表格中的正确行（表格看起来像textarea）
它来回走动，它不会瞄准每当每个评论弹出时，我希望在表格的顶部位置显示正确的线条它应滚动，并按照表格中的当前注释行。

我该如何解决这个问题？任何人都可以修改和更新我的jsfiddle吗？

的Javascript

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;
}

Answer 1

我不知道为什么，但offset().top为评论行提供的值太大而无法使用...他们只是让div向下滚动所有方式。

我用DOM属性offsetTop替换它，它似乎工作正常：

$('div#container').animate({
    scrollTop: this.offsetTop
}, 500);

http://jsfiddle.net/9zqhF/19/

Answer 2

我在这里做了一个工作演示：http://jsfiddle.net/9zqhF/17/

修正

正如米克洛斯所指出的那样，偏移太大了。 jQuery(this)[0].offsetTop。
comments数组未传递到您的findComments()函数中，它不在正确的上下文中。我所做的是修改函数以接受注释为变量：showComments(fixedTime, comments);和findComments(time, comments);
您的动画功能可以被调用两次（因为您同时有多个注释），导致跳转你看到。您可以通过使用循环索引确保它仅在第一次迭代中运行来解决此问题：
- 设置索引jQuery(row).each(function(index) {
- 然后使用索引：

像这样：

if(index == 0)
{
    $('div#container').animate({
        scrollTop: jQuery(this)[0].offsetTop
    }, 500);
}

为什么这不会跳到正确的行？

2 个答案: