javascript歌詞滾動（歌詞滾動怎麼實現的）

本文目錄一覽：

• 1、javascript 模擬Marquee文字向左均勻滾動代碼
• 2、BY2的 javascript歌詞是什麼啊
• 3、JavaScript如何滾動顯示歌詞呢？
• 4、求一個js歌詞同步的代碼
• 5、JS/JAVASCRIPT 選中文本框內的文字 讓滾動條滾動到選中文字的位置
• 6、在JavaScript或者jQuery中怎麼實現讓歌詞滾動

javascript 模擬Marquee文字向左均勻滾動代碼

可以實現勻速、無縫、加鏈接以及其它的修飾效果，本代碼就是實現了這一功能，讓文字從右至右平滑滾動，滾動寬度、高度、速度均可以設定。

Js文字向左運動

var

marqueewidth=350

var

marqueeheight=22

var

speed=5

var

marqueecontents=’歡迎光臨腳本之家

網頁特效欄目，精品特效全收羅！’

if

(document.all)

document.write(”+marqueecontents+”)

function

regenerate(){

window.location.reload()

}

function

regenerate2(){

if

(document.layers){

setTimeout(“window.onresize=regenerate”,450)

intializemarquee()

}

}

function

intializemarquee(){

document.cmarquee01.document.cmarquee02.document.write(”+marqueecontents+”)

document.cmarquee01.document.cmarquee02.document.close()

thelength=document.cmarquee01.document.cmarquee02.document.width

scrollit()

}

function

scrollit(){

if

(document.cmarquee01.document.cmarquee02.left=thelength*(-1)){

document.cmarquee01.document.cmarquee02.left-=speed

setTimeout(“scrollit()”,100)

}

else{

document.cmarquee01.document.cmarquee02.left=marqueewidth

scrollit()

}

}

window.onload=regenerate2

[Ctrl+A

全選

注:如需引入外部Js需刷新才能執行]

BY2的 javascript歌詞是什麼啊

你還是走了 我有點不舍 該說點什麼

我不是哭了 是陽關折射

眼睛也紅了顏色

我不懂 為什麼快樂 像雪糕口中

融化的特別衝動

不懂為什麼樹葉 冷後的時候

舊的要放手

我還捨不得 你不要走

走 走夠了沒

重來也不曾一個人生活

原來不想再值得擁有

我還在接受 你寫過的感

永遠才不落空

成長的存在 沒有過瘀傷 像蘋果一樣青澀

懂不懂得快樂像雪糕口中 融化的特別衝動

不懂為什麼樹葉 冷後的時候 舊的要放手

我還捨不得 你不要走 重來也不曾一個人生活 能不能讓時間回頭 我還捨不得你不要走 重來也不曾一個人生活 原來不想再值得擁有

JavaScript如何滾動顯示歌詞呢？

第一步：將你所有的歌詞放在一個層裏面，每句有相等的間隔，但是層的高度設置為你想顯示的那麼高，溢出設置隱藏，設置為絕對定位

第二步：設置動畫：讓歌詞的層每次間隔一定的時間向上運動setInterval函數，還可以設置透明度漸變

第三步：判斷是否到達末尾然後再重頭開始實現循環

求一個js歌詞同步的代碼

htmlhead

meta http-equiv=Content-Type content=text/html; charset=utf-8

title林俊傑 – 完美新世界/title

style

!–

.div

{

width:460px;

height:200px;

overflow-y:scroll;

padding-top:80px;

text-align:left;

padding-left:100px;

line-height:25px;

font-size:13px;

padding-bottom:50px;

}

—

/style

script language=”javascript”

var scrollt=0;

var tflag=0;//存放時間和歌詞的數組的下標

var lytext=new Array();//放存漢字的歌詞

var lytime=new Array();//存放時間

var delay=10;

var line=0;

var scrollh=0;

function getLy()//取得歌詞

{

var ly=”[00:00]完美新世界.[00:10]作曲:林俊傑.[00:14]支持JJ.[00:18]LRC歌詞製作:鴻恆之心.[00:44]是你一束光 琥珀色遠方.[00:50]回憶被穿腸 傷口被遺忘.[00:56]淚水跟着眼眶 流出一道方向.[01:02]牽引着你我的希望.[01:11][02:52][03:50]手聯手 用心連接宇宙.[01:16][02:57]夜光傾透 寒風裡微顫抖.[01:22]古老的記憶 不斷的尋覓.[01:28][03:09]因為愛要堅持到最後.[01:34][03:15]手聯手 撫平心靈傷口.[01:39][03:21][03:55]寒風顫抖 還是要往前走.[01:45][03:26][04:01]當太陽再升起 用愛解凍大地.[01:51][03:32]重建完美新世界 重現你和我.[03:45]Yeah ~ Yeah ~[02:25]什麼無償 說不出模樣.[02:31]我是迎着光 逆着風飄蕩.[02:37]你說暮色蒼茫 空氣開始搖晃.[02:44]不用害怕 走吧.[02:46]希望就在不遠地方.[03:03]古老的記憶 依然不斷的尋覓.[04:07]重現完美新世界.[04:14]只有你和我.[00:06][00:22][01:08][01:33][02:00][02:517][03:14][03:43][03:49][04:19] 歌詞很給力噢！.[04:20]music end…….”

return ly;

}

function show(t)//顯示歌詞

{

var div1=document.getElementById(“lyr”);//取得層

document.getElementById(“lyr”).innerHTML=” “;//每次調用清空以前的一次

if(tlytime[lytime.length-1])//先捨棄數組的最後一個

{

for(var k=0;klytext.length;k++)

{

if(lytime[k]=ttlytime[k+1])

{

scrollh=k*25;//讓當前的滾動條的頂部改變一行的高度

div1.innerHTML+=”font color=red style=font-weight:bold”+lytext[k]+”/fontbr”;

}

else if(tlytime[lytime.length-1])//數組的最後一個要捨棄

div1.innerHTML+=lytext[k]+”br”;

}

}

else//加上數組的最後一個

{

for(var j=0;jlytext.length-1;j++)

div1.innerHTML+=lytext[j]+”br”;

div1.innerHTML+=”font color=red style=font-weight:bold”+lytext[lytext.length-1]+”/fontbr”;

}

}

function scrollBar()//設置滾動條的滾動

{

if(document.getElementById(“lyr”).scrollTop=scrollh)

document.getElementById(“lyr”).scrollTop+=1;

if(document.getElementById(“lyr”).scrollTop=scrollh+50)

document.getElementById(“lyr”).scrollTop-=1;

window.setTimeout(“scrollBar()”,delay);

}

function getReady()//在顯示歌詞前做好準備工作

{

var ly=getLy();//得到歌詞

//alert(ly);

var arrly=ly.split(“.”);//轉化成數組

for(var i=0;iarrly.length;i++)

sToArray(arrly[i]);

sortAr();

/*for(var j=0;jlytext.length;j++)

{

document.getElementById(“lyr”).innerHTML+=lytime[j]+lytext[j]+”br”;

}*/

scrollBar();

}

function sToArray(str)//解析如「[02:02][00:24]沒想到是你」的字符串前放入數組

{

var left=0;//”[“的個數

var leftAr=new Array();

for(var k=0;kstr.length;k++)

{

if(str.charAt(k)==”[“)

{

leftAr[left]=k;

left++;

}

}

if(left!=0)

{

for(var i=0;ileftAr.length;i++)

{

lytext[tflag]=str.substring(str.lastIndexOf(“]”)+1);//放歌詞

lytime[tflag]=conSeconds(str.substring(leftAr[i]+1,leftAr[i]+6));//放時間

tflag++;

}

}

//alert(str.substring(leftAr[0]+1,leftAr[0]+6));

}

function sortAr()//按時間重新排序時間和歌詞的數組

{

var temp=null;

var temp1=null;

for(var k=0;klytime.length;k++)

{

for(var j=0;jlytime.length-k;j++)

{

if(lytime[j]lytime[j+1])

{

temp=lytime[j];

temp1=lytext[j];

lytime[j]=lytime[j+1];

lytext[j]=lytext[j+1];

lytime[j+1]=temp;

lytext[j+1]=temp1;

}

}

}

}

function conSeconds(t)//把形如：01：25的時間轉化成秒；

{

var m=t.substring(0,t.indexOf(“:”));

var s=t.substring(t.indexOf(“:”)+1);

s=parseInt(s.replace(/\b(0+)/gi,””));

if(isNaN(s))

s=0;

var totalt=parseInt(m)*60+s;

//alert(parseInt(s.replace(/\b(0+)/gi,””)));

if(isNaN(totalt))

return 0;

return totalt;

}

function getSeconds()//得到當前播放器播放位置的時間

{

var t=getPosition();

t=t.toString();//數字轉換成字符串

var s=t.substring(0,t.lastIndexOf(“.”));//得到當前的秒

//alert(s);

return s;

}

function getPosition()//返回當前播放的時間位置

{

var mm=document.getElementById(“MediaPlayer1”);

//var mmt=;

//alert(mmt);

return mm.CurrentPosition;

}

function mPlay()//開始播放

{

var ms=parseInt(getSeconds());

if(isNaN(ms))

show(0);

else

show(ms);

window.setTimeout(“mPlay()”,100)

}

window.setTimeout(“mPlay()”,100)

function test()//測試使用，

{

alert(lytime[lytime.length-1]);

}

/script

/head

body onLoad=”getReady()”

object id=”MediaPlayer1″ width=”460″ height=”68″ classid=”CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95″

codebase=””

align=”baseline” border=”0″ standby=”Loading Microsoft Windows Media Player components…”

type=”application/x-oleobject”

param name=”FileName” value=””

param name=”ShowControls” value=”1″

param name=”ShowPositionControls” value=”0″

param name=”ShowAudioControls” value=”1″

param name=”ShowTracker” value=”1″

param name=”ShowDisplay” value=”0″

param name=”ShowStatusBar” value=”1″

param name=”AutoSize” value=”0″

param name=”ShowGotoBar” value=”0″

param name=”ShowCaptioning” value=”0″

param name=”AutoStart” value=”1″

param name=”PlayCount” value=”0″

param name=”AnimationAtStart” value=”0″

param name=”TransparentAtStart” value=”0″

param name=”AllowScan” value=”0″

param name=”EnableContextMenu” value=”1″

param name=”ClickToPlay” value=”0″

param name=”InvokeURLs” value=”1″

param name=”DefaultFrame” value=”datawindow”

embed src=”” align=”baseline” border=”0″ width=”460″ height=”68″

type=”application/x-mplayer2″

pluginspage=”;sbp=mediaplayerar=mediasba=plugin”

name=”MediaPlayer” showcontrols=”1″ showpositioncontrols=”0″

showaudiocontrols=”1″ showtracker=”1″ showdisplay=”0″

showstatusbar=”1″

autosize=”0″

showgotobar=”0″ showcaptioning=”0″ autostart=”1″ autorewind=”0″

animationatstart=”0″ transparentatstart=”0″ allowscan=”1″

enablecontextmenu=”1″ clicktoplay=”0″ invokeurls=”1″

defaultframe=”datawindow”

/embed

/object

div id=lyr class=div歌詞加載中……/div

div align=”center”/div

p align=”center” /p

p align=”center” /p

/body

/html

JS/JAVASCRIPT 選中文本框內的文字 讓滾動條滾動到選中文字的位置

function func(){

var textarea = document.getElementById(“textarea”);

//首先移動光標到所選文字位置，滾動條自動滾動

MoveCursortoPos(‘textarea’ , 30 );

//再選中文字

textarea.setSelectionRange(30,32);//選中文本框內的文字

//textarea.scrollTop = textarea.scrollHeight;//滾動到底部

//想要修改成只滾動到 選中文字 的位置應該怎麼寫？

}

//設置光標位置

function MoveCursortoPos(id,pos){//定位光標到某個位置

var obj = document.getElementById(id); //獲得元素

pos = pos ?pos :obj.value.length;

if (obj.createTextRange) {//IE瀏覽器 IE瀏覽器中有TextRange 對body,textarea,button有效

var range = obj.createTextRange(); //創建textRange

range.moveStart(“character”, pos); //移動開始點，以字符為單位

range.collapse(true);//沒有移動結束點直接 摺疊到一個點

range.select();//選擇這個點

} else {//非IE瀏覽器

obj.setSelectionRange(obj.value.length, pos);

}

obj.focus();

}

在JavaScript或者jQuery中怎麼實現讓歌詞滾動

把歌詞放在

ul

lilrc/li

/ul

這裡

改變ul的top或者margin-top就可以實現滾動了，當然ul的父元素

設置

overflow:hidden;

height:

等因素

看我做的音樂播放器