0

我制作了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;
}
4

2 回答 2

3

我不知道为什么，但是offset().top为评论行提供的值太大而无用......它们只会让 div 一直向下滚动。

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

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

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

于 2013-08-23T15:50:14.770 回答
2

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

修复

  1. 正如 Miklos 所指出的，偏移量太大。 jQuery(this)[0].offsetTop.

  2. 该comments数组没有被传递到您的findComments()函数中，它不在正确的上下文中。我所做的是修改函数以接受注释作为变量：showComments(fixedTime, comments);和findComments(time, comments);

  3. 您的动画函数可以被调用两次（因为您同时有多个评论），导致您看到的跳跃。您可以通过使用循环索引确保它仅在第一次迭代时运行来解决此问题：

    • 设置索引jQuery(row).each(function(index) {

    • 然后使用索引：

像这样：

if(index == 0)
{
    $('div#container').animate({
        scrollTop: jQuery(this)[0].offsetTop
    }, 500);
}
于 2013-08-23T16:04:17.930 回答