HTML5技术

用HTML5的Audio标签做一个歌词同步的效果 - 蜀北乔少恭(2)

字号+ 作者:H5之家 来源:H5之家 2016-03-17 16:00 我要评论( )

$('.songs_list li:nth-child(1)').addClass('active' );$( '.songs_cnt').mouseenter( function () { var e=event|| window.event; var tag= e.target|| e.srcElement; if (tag.nodeName=='BUTTON' ){$( '.songs_l

$('.songs_list li:nth-child(1)').addClass('active'); $('.songs_cnt').mouseenter(function () { var e=event||window.event; var tag= e.target||e.srcElement; if(tag.nodeName=='BUTTON'){ $('.songs_list').animate({'marginLeft':'0px'},'slow'); } }); $('.songs_cnt').mouseleave(function () { $('.songs_list').animate({'marginLeft':'-280px'},'slow'); }); $('.songs_list li').each(function () { $(this).click(function () { $('#aud').attr('src','music/'+$(this).text()+'.mp3'); $('#gc ul').empty(); fn($(this).text()); $('.songs_list li').removeClass('active'); $(this).addClass('active'); }); })

好了,到了这里,那么你的这个歌词同步的效果的一些功能差不多都有了,今天也就到这里了。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

  • 移动前端常用meta标签 - 0jiji0

    移动前端常用meta标签 - 0jiji0

    2017-04-21 12:00

网友点评
9