在JavaScript或者jQuery中怎么实现让歌词滚动

JavaScript026

在JavaScript或者jQuery中怎么实现让歌词滚动,第1张

把歌词放在

<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>