如何用HTML,让歌词在图片上滚动。 我发音乐帖子用的。

html-css025

如何用HTML,让歌词在图片上滚动。 我发音乐帖子用的。,第1张

<script type="text/javascript">

marqueesHeight=222

stopscroll=false

document.write('<div id="templayer" style="position:absolutez-index:1visibility:hidden"></div>')

preTop=0currentTop=0

function init(){

with(marquees){

style.height=marqueesHeight

style.overflowX="visible"

style.overflowY="hidden"

noWrap=true

onmouseover=new Function("stopscroll=true")

onmouseout=new Function("stopscroll=false")

}

templayer.innerHTML=""

while(templayer.offsetHeight<marqueesHeight){

templayer.innerHTML+=marquees.innerHTML

}

marquees.innerHTML=templayer.innerHTML+templayer.innerHTML

setInterval("scrollup()",50)//这里的数字是歌词滚动速度,根据需要填写

}

onload=init

function scrollup(){

if(stopscroll==true) return

preTop=marquees.scrollTop

marquees.scrollTop+=1

if(preTop==marquees.scrollTop){

marquees.scrollTop=templayer.offsetHeight-marqueesHeight

marquees.scrollTop+=1

}

}

</script>

<br />:

<div id="marquees">

滚动文字内容,就是你所说的歌词<br />

</div>

把歌词放在

<ul>

<li>lrc</li>

</ul>

这里

改变ul的top或者margin-top就可以实现滚动了,当然ul的父元素

设置

overflow:hidden

height:

等因素

看我做的音乐播放器