把歌词放在
<ul>
<li>lrc</li>
</ul>
这里
改变ul的top或者margin-top就可以实现滚动了，当然ul的父元素
设置
overflow:hidden
height:
等因素
看我做的音乐播放器
第一步：将你所有的歌词放在一个层里面，每句有相等的间隔，但是层的高度设置为你想显示的那么高，溢出设置隐藏，设置为绝对定位第二步：设置动画：让歌词的层每次间隔一定的时间向上运动setInterval函数，还可以设置透明度渐变
第三步：判断是否到达末尾然后再重头开始实现循环
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Player</title>
<style type="text/css">
#audio-wrapper{
border:1px solid
text-align:center
}
.activated{
color:#33b
font-weight:bold
background:#ddf
}
#lrc{
text-align:center
width:360px
height:400px
overflow:hidden
border:2px solid #ddd
box-shadow:2px 2px 2px silver
}
.lyrics-container{
position:relative
width:99%
height:80%
border:1px solid red
overflow:hidden
}
.lyrics-container2{
position:absolute
width:355px
}
#lrc p{
text-indent:0
margin:0
padding:6px
}
.music-title,.album,.artist{
margin:0
padding:4px
text-indent:0
text-align:left
}
</style>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="#audio-wrapper">
<p><audio src="data/aimei.mp3" controls></audio></p>
</div>
<div id="lrc"></div>
<script type="text/javascript">
$(document).ready(function(){
var $lrc = $('#lrc')
var html =''
$('audio').on('play',function(){
var start = new Date()
if($lrc.html() == ''){
$.ajax({
url:'data/aimei.xml',
type:'get',
dataType:'xml',
success:function(data){
html += '<div class="info">'
if($(data).find('TITLE').length >0){
html += '<p class="music-title">歌曲：' + $(data).find('TITLE').text()+'</p>'
}
if($(data).find('ALBUM').length >0){
html += '<p class="album">专辑：' + $(data).find('ALBUM').text()+'</p>'
}
if($(data).find('ARTIST').length >0){
html += '<p class="artist">演唱：' + $(data).find('ARTIST').text()+'</p>'
}
html += '</div>'
html += '<div class="lyrics-container">'
html += '<div class="lyrics-container2">'
$(data).find('LRC').each(function(){
html += '<p class="lyrics" tag="'+ $(this).attr('TAG') +'">' + $(this).text() +'</p>'
})
html += '</div></div>'
$lrc.html(html)
//alert($(data).find('LRC').length)
}
})
}
var timer = setInterval(function(){
var now = new Date()
var elapsed = now - start
if($lrc.find('.lyrics').length){
$lrc.find('.lyrics').each(function(){
var isOK = elapsed - $(this).attr('tag')
if(isOK <13 &&isOK >0){
$lrc.find('.lyrics').removeClass('activated')
$(this).addClass('activated')
if($(this).prevAll('.lyrics').length >3){
$('.lyrics-container2').animate({
'top':'-=30px'
})
//console.log($(this).prevAll('.lyrics').length)
}
}
})
}
},10)
})
})
</script>
</body>
</html>
