您的位置:

javascript歌词滚动(歌词滚动怎么实现的)

本文目录一览:

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:

等因素

看我做的音乐播放器

javascript歌词滚动(歌词滚动怎么实现的)

2022-11-15
如何制作背景滚动效果

2023-05-12
如何隐藏浏览器滚动条

2023-05-19
c语言拍手歌,语言游戏拍手歌

2023-01-04
包含extjs滚动条美化的词条

本文目录一览: 1、extjs 中bbar中数据太多,屏幕显示不全需要有在bbar设置滚动条,求大神指导.... 2、Extjs怎么在panel面板里面设置滚动条 3、Extjs5里怎么设置panel

2023-12-08
包含extjs滚动条位置的词条

本文目录一览: 1、extjs 表格横向滚动偏移,有什么方法可以解决吗 2、EXTJS的combo组件的下拉选项框的高度和垂直滚动条如何设置 3、Extjs怎么在panel面板里面设置滚动条 extj

2023-12-08
韩国歌曲cjsong(韩国歌曲老歌100首)

本文目录一览: 1、顺子的《Cj》 歌词 2、求《请回答1988》里所有的韩语老歌曲名字! 3、韩剧我的女孩的主题歌的名字是什么 4、韩版花样男子里面的歌曲都是哪些? 顺子的《Cj》 歌词 歌曲名:C

2023-12-08
javascript动态html页面滚动,js内容滚动

2022-11-24
web中js时间滚动(js页面滚动)

本文目录一览: 1、JS实现滚动条触底加载更多 2、java web项目中js怎么取到div中滚动条的高度? 3、js如何控制整个页面滚动条的位置 4、web自动化中页面多个滚动条时的拖动操作? 5、

2023-12-08
一段js滚动代码,html一段文字上下滚动代码

本文目录一览: 1、js 滚动代码请教 2、求修改一段js滚动代码,要求平滑滚动,无闪烁 3、文字滚动js代码 4、一段JS代码,自动滚动的,求高手解释一下 js 滚动代码请教 在百度或谷歌搜素“ja

2023-12-08
不用java的垂直滚动看板(不用java的垂直滚动看板怎么用

2022-11-15
js编写图片手动滚动的代码(js滚动图片怎么做)

本文目录一览: 1、怎么用JS脚本使多张图片滚动? 2、js实现图片滚动效果 3、求JS图片滚动代码 怎么用JS脚本使多张图片滚动? 推荐使用marquee实现图片滚动,示例:marqueescrol

2023-12-08
如何关闭谷歌浏览器的自动更新

2023-05-18
包含java学习日记day6的词条

2022-11-18
js网页自动滚动,html 自动滚动

本文目录一览: 1、请教JS高手,怎么让Iframe中的页面自动滚屏 2、js怎么控制网页滚动到指定位置 3、fullpage.js自动滚动怎么设置 4、js控制页面滚动(实例) 请教JS高手,怎么让

2023-12-08
关于谷歌翻译接口调用php方法,谷歌 php

2022-11-22
js和canvas实现数字滚动,canvas 滚动条

本文目录一览: 1、Unity3d如何实现滚动文本框 2、如何实现canvas的图片轮播 3、怎样canvas画布上添加滚动条,显示更多数据 4、HTML5 在CANVAS标签里面增加滚动条 Unit

2023-12-08
HTML自动播放音乐详解

2023-05-18
谷歌ai自动写作训练,谷歌ai自动写作训练在哪

2022-11-25
java滚动条,java滚动条窗口截图

2023-01-05