• 技术文章 >web前端 >js教程

    怎么用javascript实现文字滚动

    藏色散人藏色散人2021-09-14 11:25:15原创95

    javascript实现文字滚动的方法:1、创建一个HTML示例文件;2、添加script标签;3、通过“$(".txtBox").addClass("txtBox_4");”实现文字垂直排列滚动或者设置文字水平排列滚动即可。

    本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    怎么用javascript实现文字滚动?

    js实现文字滚动效果

    在之前小编已经和大家介绍了一些常用的js动画效果,在此,和大家介绍一种可能不太常用的动画效果。该动画效果与文字相关,且,虽然不常用,但几乎每个人都见过它。

    相信大家都使用酷狗音乐或是网易云音乐进行音乐的搜索,听鉴,那么久一定会看到歌词页面中,歌词滚动的效果。此动画效果与其相同,但相对于这些音乐歌词效果而言又有些不同,增加了文字竖直排列并且滚动的效果。

    在介绍之前,先和大家一起了解一些文字垂直排列的方式:

    writing-mode属性

    1、取值:
    (1)writing-mode:horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl
    (2)兼容写法:-webkit-writing-mode:horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl
    (注: lr-tb 和tb-rl在IE中不兼容)
    默认值:normal
    适用于:除 table-row-group, table-column-group, table-row, table-column 之外的所有元素
    继承性:有
    动画性:否
    计算值:特定值

    2、writing-mode的取值介绍
    (1)horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom(类似IE私有值lr-tb)
    (2)vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left(类似IE私有值tb-rl)
    (3)vertical-lr:垂直方向自左而右的书写方式。即 top-bottom-left-right
    (4)lr-tb:左-右,上-下。对象中的内容在水平方向上从左向右流入,后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的(IE)
    (5)tb-rl:上-下,右-左。对象中的内容在垂直方向上从上向下流入,自右向左。后一竖行在前一竖行的左面。全角字符是(6)竖直向上的,半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的(IE)

    html:

    <body style="font-size: 12px;" >
        <section class="topBox">
            <p class="topBoxTxt">
               <ul class="txtBox" id="txtBox">
    
               </ul>
            </p>
        </section>
    
        <script type="text/javascript" src="index.js" ></script>
        <script>
            (function(win){
                //文字水平排列滚动
            //          hor();
            //          horizontal(0);
    
                //文字垂直排列滚动
                $(".txtBox").addClass("txtBox_4");
                ver();
                vertical(0);            //移动端适配
                var doc = win.document;            var docEl = doc.documentElement;            var tid;            function refreshRem() {
                    var width = docEl.getBoundingClientRect().width                if (width > 768) { 
                        width = 768;
                    }                var rem = width / 7.5;
                    docEl.style.fontSize = rem + 'px';
                    docEl.style.fontSize = rem + 'px';
                    docEl.style.fontSize = rem + 'px';
                }
                win.addEventListener('resize', function() {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }, false);
                win.addEventListener('pageshow', function(e) {
                    if (e.persisted) {
                        clearTimeout(tid);
                        tid = setTimeout(refreshRem, 300);
                    }
                }, false);
                refreshRem();
            })(window);    </script></body>

    css:

    body,html{   width:100%;    height:100%;    position: relative;    background: #232226;    overflow-y: auto;    overflow-x: hidden;}.topBox,.topBoxTxt{    width:100%;    height:auto;    position: relative;}.topBoxTxt{    text-align: center;    height:auto;;
        color:#fff;    font-size: 0.36rem;    padding-top:55px;}.txtBox{    width: 5.6rem;    height: 5.2rem;    margin:0 auto;    overflow-y: scroll;}
       .txtBox>li{            opacity: 0.5;            height:0.74rem;}
       .txtBox>li:first-child{      padding-top:60px;   }.txtBox>li.hotColor{    opacity: 1;}.txtBox_4{    width:4.6rem;    height: 7.5rem;    overflow-x: auto;    white-space: nowrap;    display: block;}.txtBox_4>li{    writing-mode:tb-rl;    writing-mode:vertical-rl;    -webkit-writing-mode: vertical-rl;    height: 0;    line-height: 0.75rem;    word-wrap:break-word;}.txtBox_4>li{    width:0.4rem;    text-align: center;    margin:0 0.1rem;    display: inline-table;    position: relative;}

    index.js:

    var freq=10;//滚动频率var fraction=9/10;// 水平文字高亮显示行在歌词显示区域中的固定位置百分比var frac=3/10;// 垂直文字高亮显示行在歌词显示区域中的固定位置百分比   var timer=true;//定时器var num=-1;//当前行下标var time;//滚动距离var eul = document.getElementById("txtBox");var lis=[
        {"offset":3000, "text":"我总是轻描淡写告诉你我的愿望"},
        {"offset":6000, "text":"也给你千言万语都说不尽的目光"},
        {"offset":9000, "text":"这世界总有人在忙忙碌碌寻宝藏"},
        {"offset":12000, "text":"却误了浮世骄阳也错过人间万象"},
        {"offset":15000, "text":"古城里长桥上"},
        {"offset":18000, "text":"人如海车成行"},
        {"offset":21000, "text":"你笑得像光芒"},
        {"offset":24000, "text":"蓦然把我照亮"},
        {"offset":27000, "text":"风轻扬夏未央"},
        {"offset":30000, "text":"林荫路单车响"},
        {"offset":33000, "text":"原来所谓爱情"},
        {"offset":36000, "text":"是这模样"},
        {"offset":39000, "text":""}
    ]var count=lis.length%7+5;//文字水平排列滚动function  hor(){
        for (var i = 0; i <lis.length; i++) {        var eli = document.createElement("li");
            eli.innerText = lis[i].text;
            eul.appendChild(eli);
        }     for(var j=0;j<count;j++){        var eli = document.createElement("li");
            eli.innerText ="";
            eul.appendChild(eli);
        }
    }function horizontal(lineno){
        common(lineno,horizontal);    var scrollTop;    var ep = eul.children[lineno];    if(30<ep.offsetTop<eul.clientHeight*fraction){
            scrollTop=ep.offsetTop;
        }else if(ep.offsetTop>(eul.scrollHeight-eul.clientHeight*(1-fraction))){
            scrollTop=eul.scrollHeight-eul.clientHeight;
        }else{
            scrollTop=ep.offsetTop=eul.clientHeight*fraction;
        }    // 如用户拖动滚动条导致当前显示行超出显示区域范围,下一行直接定位到当前显示行
        if (eul.scrollTop > (scrollTop + eul.clientHeight*fraction)|| (eul.scrollTop + eul.clientHeight*fraction) < scrollTop){
            eul.scrollTop = scrollTop;
        }else { 
            var step = Math.ceil(Math.abs(eul.scrollTop - scrollTop)/(time/freq));
            scrollT(eul.scrollTop, scrollTop, step);
        }
    }function scrollT(crt, dst, step){
        if(Math.abs(crt - dst) < step){        return;
        }     if(crt < dst){
            eul.scrollTop += step;
            crt += step;
        }    else {
            eul.scrollTop -= step;
            crt -= step;
        }
        setTimeout(scrollT.bind(this, crt, dst, step), freq);
    };//文字垂直排列滚动function ver(){
        console.log(eul)    for (var i = 0; i <lis.length; i++) {        var eli = document.createElement("li");
            eli.innerHTML = lis[i].text;
            eul.appendChild(eli);        if(eli.innerText.length<15){
                eli.style.marginBottom=(15-eli.innerText.length)+"em";
            }
        }    for(var j=0;j<count;j++){        var eli = document.createElement("li");
            eli.innerText ="";
            eul.appendChild(eli);
        }
    }function vertical(lineno){
        common(lineno,vertical);    var scrollLeft;    var ep = eul.children[lineno];    if (ep.offsetLeft < eul.clientWidth*frac){
            scrollLeft = 0;
        } else if (ep.offsetLeft > (eul.scrollWidth - eul.clientWidth*(1-frac))){
            scrollLeft = eul.scrollWidth - eul.clientWidth;
        } else {
            scrollLeft = ep.offsetLeft - eul.clientWidth*frac;
        }    // 如用户拖动滚动条导致当前显示行超出显示区域范围,下一行直接定位到当前显示行
        if (eul.scrollLeft > (scrollLeft + eul.clientWidth*frac)|| (eul.scrollLeft + eul.clientWidth*frac) < scrollLeft){
            eul.scrollLeft = scrollLeft;
        } else { 
            var step = Math.ceil(Math.abs(eul.scrollLeft - scrollLeft)/(time/freq));
            scrollL(eul.scrollLeft, scrollLeft, step);
        }
    }function scrollL(crt, dst, step){
        if(Math.abs(crt - dst) < step){        return;
        }    if(crt < dst){
            eul.scrollLeft += step;
            crt += step;
        } else {
            eul.scrollLeft -= step;
            crt -= step;
        }
        setTimeout(scrollL.bind(this, crt, dst, step), freq);
    }function common(lineno,fn){
        if (lineno ==0) {
            time = lis[lineno].offset; 
        } else {
            time = lis[lineno].offset - lis[lineno-1].offset;
        }
        timer = setTimeout(fn.bind(this, lineno+1), time);
        num=lineno;    //若滚动到最后一行,则从头开始,并把每一行文字均取消高亮
        if(lineno==lis.length-1){        for(var i=0;i<(eul.children).length-1;i++){
                eul.children[i].setAttribute("class", "");
            }
            lineno=0;
            timer = setTimeout(fn.bind(this, lineno), time);
        }    if (lineno > 0) {
            eul.children[lineno-1].setAttribute("class", "");
        }    var ep = eul.children[lineno];
        ep.setAttribute("class", "hotColor");
    }

    推荐学习:《javascript基础教程

    以上就是怎么用javascript实现文字滚动的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript
    上一篇:一招教你使用Node.js中iis部署运行node(附代码) 下一篇:浅析EOS区块链柚子钱包前端插件scatter开发(分享)
    线上培训班

    相关文章推荐

    • HTML怎么实现滚动文字效果• Javascript怎么实现字幕滚动• 手把手教你使用CSS自定义好看的滚动条样式!• JavaScript如何隐藏滚动条

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网