[英]How can I make horizontal/vertical scroll animation in/out?
This my current code. 这是我当前的代码。 This loads all the comments, and show the comments within
<p>
as the time of video goes by. 这将加载所有评论,并在视频播放时在
<p>
内显示评论。
The style newsticker
is square with border line. newsticker
样式是带有边框的正方形。
I want to show the comment in it, and slides-in, then slides-out. 我想在其中显示评论,然后先滑入,然后滑出。 Just like this here http://spreadthesource.com/sandbox/featurify/
就像这里http://spreadthesource.com/sandbox/featurify/
How can I make it possible? 我怎样才能实现呢?
The point is refreshing content of <p>
every seconds with onPlay of media. 关键是利用媒体的onPlay每秒刷新
<p>
内容。
So loaded comment has to slide-in, and stay there for 5 seconds, and slides out to disappear. 因此,已加载的评论必须滑入并停留在那里5秒钟,然后滑出以消失。
I made DEMO with jsfiddle. 我用jsfiddle制作了DEMO 。
Anyone can show me with code please. 任何人都可以给我看代码。
Javascript Java脚本
jQuery(document).ready(function () {
$('#video').on('timeupdate',function(e){
showComments(this.currentTime);
});
});
var comments = [{'time':'10','message':'hello! 10 secs has past'},{'time':'10','message':'hello! 10-2 secs has past'},{'time':'5','message':'hello! 5 secs has past'},{'time':'30','message':'hello! 30 secs has past'}];
function showComments(time){
var comments = findComments(time);
$.each(comments,function(i,comment){
$('p#newsticker').text(comment.message);
// Show for 5 seconds, then hide the `p` element.
$('p#newsticker').show().delay(2000).fadeOut();
});
}
function findComments(time){
return $.grep(comments, function(item){
return item.time == time.toFixed();
});
}
HTML HTML
<body>
<div class="newsticker">
<p id="newsticker"></p>
</div>
<br />
<br />
<video id="video" controls="controls" autoplay="autoplay" name="media"><source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></video>
</body>
CSS CSS
div.newsticker{
border:1px solid #666666;
width:400px;
height:50px;
}
jQuery(document).ready(function () {
var counter=5;
$('#video').on('timeupdate',function(e){
if(this.currentTime > counter){
showComments(this.currentTime);
counter+=5; // for updating the comment every after 5 seconds.
}
});
});
var comments = [{'time':'10','message':'hello! 10 secs has past'},{'time':'15','message':'hello! 15 secs has past'},{'time':'5','message':'hello! 5 secs has past'},{'time':'20','message':'hello! 20 secs has past'}];
function showComments(time){
var comments = findComments(time);
$.each(comments,function(i,comment){
$('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600).fadeOut(100);
$('.newsticker').append("<p style='margin-left:400px;opacity:0'>"+comment.message+"</p>");
$('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);
});
}
function findComments(time){
return $.grep(comments, function(item){
return item.time == time.toFixed();
});
}
I have changed your code.Hope this will work for you. 我已经更改了您的代码。希望这对您有用。 you can see the fiddle from here.
您可以从这里看到小提琴。 http://jsfiddle.net/Aveendra/m5tt9/
http://jsfiddle.net/Aveendra/m5tt9/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.