如何制作水平/垂直滚动动画
How can I make horizontal/vertical scroll animation in/out?
这是我当前的代码。这会加载所有的评论,并随着视频时间的推移在<p>
中显示评论
样式newsticker
为带边框的正方形。
我想在其中显示评论,然后滑入,然后滑出。就像这里一样http://spreadthesource.com/sandbox/featurify/
我怎样才能使它成为可能
重点是通过媒体的onPlay每隔一秒刷新<p>
的内容
所以加载的评论必须滑入,并在那里停留5秒,然后滑出消失。
我用小提琴制作了DEMO。
任何人都可以给我看代码。
Javascript
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
<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
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();
});
}
我更改了你的密码。希望这对你有用。你可以从这里看到小提琴。http://jsfiddle.net/Aveendra/m5tt9/
相关文章:
- 滚动动画代码不起作用
- CSS滚动动画赢得'不要在django跑步
- 我想要一个类似于网站 https://onlycoin.com/ 的jQuery鼠标滚动动画效果
- 如何在没有外部插件的情况下在jQuery中制作一个滚动动画
- 使用鼠标滚轮控制页面滚动动画
- Jquery 代码不适用于页面上的滚动动画
- 滚动动画无法正常工作;当我单击链接时,我被定向但没有动画
- JQuery 页面滚动动画仅适用于镶边
- 滚动动画会断开页面上的链接
- 为什么这个滚动动画不起作用
- 从某些ID中排除滚动动画功能
- 导航栏特定的 jQuery 滚动动画
- 使用 jQuery 和 ScrollMagic 滚动动画时间轴
- 如何使用jQuery在移动网络浏览器上设置滚动动画
- 如何制作水平/垂直滚动动画
- 如何停止滚动动画
- 在单个页面上的各个部分之间滚动动画?(仅限javascript)
- 滚动动画的jQuery错误无法解释
- 随时间平滑滚动动画距离
- 在使滚动动画不触发滚动事件时遇到问题