怎么用javascript实现文字滚动

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;
    jcount;
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(30ep.offsetTopeul.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.length15){
                eli.style.marginBottom=(15-eli.innerText.length)+"em";
        }
    }
        for(var j=0;
    jcount;
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实现文字滚动的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！