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

发布时间:2022-11-15

本文目录一览:

  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 = '欢迎光临脚本之家'
marqueecontents += '网页特效栏目,精品特效全收罗!'
if (document.all)
    document.write('<div style="position:relative;width:' + marqueewidth + ';height:' + marqueeheight + 'px;overflow:hidden"><div id="cmarquee01" style="position:absolute;width:' + marqueewidth + ';height:' + marqueeheight + 'px;overflow:hidden"><div id="cmarquee02" style="position:absolute;width:' + marqueewidth + ';height:' + marqueeheight + 'px;overflow:hidden">' + marqueecontents + '</div></div></div>')
function regenerate() {
    window.location.reload()
}
function regenerate2() {
    if (document.layers) {
        setTimeout("window.onresize=regenerate", 450)
        intializemarquee()
    }
}
function intializemarquee() {
    document.cmarquee01.document.cmarquee02.document.write('<div id="cmarquee02" style="position:absolute;width:' + marqueewidth + ';height:' + marqueeheight + 'px;overflow:hidden">' + marqueecontents + '</div>')
    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歌词同步的代码

<head>
    <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 (t < lytime[lytime.length - 1]) //先舍弃数组的最后一个
            {
                for (var k = 0; k < lytext.length; k++) {
                    if (lytime[k] <= t && t < lytime[k + 1]) {
                        scrollh = k * 25; //让当前的滚动条的顶部改变一行的高度
                        div1.innerHTML += "<font color=red style='font-weight:bold'>" + lytext[k] + "</font><br>";
                    } else if (t < lytime[lytime.length - 1]) //数组的最后一个要舍弃
                        div1.innerHTML += lytext[k] + "<br>";
                }
            } else //加上数组的最后一个
            {
                for (var j = 0; j < lytext.length - 1; j++)
                    div1.innerHTML += lytext[j] + "<br>";
                div1.innerHTML += "<font color=red style='font-weight:bold'>" + lytext[lytext.length - 1] + "</font><br>";
            }
        }
        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; i < arrly.length; i++)
                sToArray(arrly[i]);
            sortAr();
            /*for(var j=0;j<lytext.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; k < str.length; k++) {
                if (str.charAt(k) == "[") {
                    leftAr[left] = k;
                    left++;
                }
            }
            if (left != 0) {
                for (var i = 0; i < leftAr.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; k < lytime.length; k++) {
                for (var j = 0; j < lytime.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">&nbsp;</p>
    <p align="center">&nbsp;</p>
</body>

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>
    <li>lrc</li>
</ul>

这里 改变ultop或者margin-top就可以实现滚动了,当然ul的父元素 设置 overflow:hidden; height: 等因素 看我做的音乐播放器