脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js文字滚动

js实现文字滚动的效果

 更新时间：2022年06月19日 11:15:28   作者：lavendersue  
这篇文章主要为大家详细介绍了js实现文字滚动的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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">
        <div class="topBoxTxt">
           <ul class="txtBox" id="txtBox">

           </ul>
        </div>
    </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");
}

其中滚动时有些小瑕疵，若想尝试的朋友，就请自行修改，小编就提供帮助到此，还请记得引入jq文件哦

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js贪吃蛇游戏实现思路和源码

    js贪吃蛇游戏实现思路和源码

    这篇文章主要为大家介绍了js贪吃蛇游戏实现思路，并分享贪吃蛇游戏源码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • springMvc 前端用json的方式向后台传递对象数组方法

    springMvc 前端用json的方式向后台传递对象数组方法

    今天小编就为大家分享一篇springMvc 前端用json的方式向后台传递对象数组方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 浅谈关于JavaScript的语言特性分析

    浅谈关于JavaScript的语言特性分析

    本篇文章小编为大家介绍，浅谈关于JavaScript的语言特性分析，有需要的朋友可以参考一下
    2013-04-04
  • 微信小程序实现多个按钮的颜色状态转换

    微信小程序实现多个按钮的颜色状态转换

    这篇文章主要为大家详细介绍了微信小程序实现多个按钮的颜色状态转换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-02-02
  • 浅析TypeScript 命名空间

    浅析TypeScript 命名空间

    命名空间一个最明确的目的就是解决重名问题。这篇文章主要介绍了TypeScript 命名空间的相关知识，本文通过实例详解给大家介绍的非常详细,需要的朋友可以参考下
    2020-03-03
  • js实现自定义右键菜单

    js实现自定义右键菜单

    这篇文章主要为大家详细介绍了js实现自定义右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • [js高手之路]从原型链开始图解继承到组合继承的产生详解

    [js高手之路]从原型链开始图解继承到组合继承的产生详解

    下面小编就为大家带来一篇[js高手之路]从原型链开始图解继承到组合继承的产生详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 微信小程序实现页面下拉刷新和上拉加载功能详解

    微信小程序实现页面下拉刷新和上拉加载功能详解

    这篇文章主要介绍了微信小程序实现页面下拉刷新和上拉加载功能,结合实例形式分析了微信小程序页面下拉刷新和上拉加载相关事件监听与功能实现操作技巧,需要的朋友可以参考下
    2018-12-12
  • angularjs模态框的使用代码实例

    angularjs模态框的使用代码实例

    这篇文章主要介绍了angularjs模态框的使用代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • 修改layui的后台模板的左侧导航栏可以伸缩的方法

    修改layui的后台模板的左侧导航栏可以伸缩的方法

    今天小编就为大家分享一篇修改layui的后台模板的左侧导航栏可以伸缩的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论