广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >如何用javascript实现文字滚动效果
  • 531

0
分享到

如何用javascript实现文字滚动效果

2024-04-02 19:04:59 531人浏览 八月长安
摘要

这篇文章主要介绍“如何用javascript实现文字滚动效果”，在日常操作中，相信很多人在如何用javascript实现文字滚动效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解

这篇文章主要介绍“如何用javascript实现文字滚动效果”，在日常操作中，相信很多人在如何用javascript实现文字滚动效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何用javascript实现文字滚动效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

本文操作环境：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实现文字滚动效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何用javascript实现文字滚动效果

本文链接: https://www.lsjlt.com/news/80996.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 如何用javascript实现文字滚动效果
    这篇文章主要介绍“如何用javascript实现文字滚动效果”，在日常操作中，相信很多人在如何用javascript实现文字滚动效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解...
    99+
    2022-10-19
  • HTML如何实现滚动文字效果
    小编给大家分享一下HTML如何实现滚动文字效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！在HTML中，可以使用marquee标签实现滚动文字效果，该标签可以向...
    99+
    2023-06-15
  • Android实现文字滚动效果
    Android 实现文字滚动效果，自己写了个timer小计时器，textview文字上下翻动效果： public class AutoTextView extends Te...
    99+
    2022-06-06
    动效 Android
  • vue实现文字滚动效果
    本文实例为大家分享了vue实现文字滚动效果的具体代码，供大家参考，具体内容如下 项目需求：系统公告，要从右忘左循环播放的牛皮广告效果。 实现： 方案一：使用定时器和CSS3的过渡属性...
    99+
    2022-11-13
  • js如何实现文字滚动的效果
    这篇文章主要介绍“js如何实现文字滚动的效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“js如何实现文字滚动的效果”文章能帮助大家解决问题。1、取值：（1）writing-mode：horizon...
    99+
    2023-07-02
  • js实现文字滚动的效果
    本文实例为大家分享了js实现文字滚动的效果的具体代码，供大家参考，具体内容如下 在之前小编已经和大家介绍了一些常用的js动画效果，在此，和大家介绍一种可能不太常用的动画效果。该动画效...
    99+
    2022-11-13
  • JavaScript如何实现余额数字滚动效果
    今天就跟大家聊聊有关JavaScript如何实现余额数字滚动效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。1.实现背景上周在一个完成任务领取红包的活动需求中，需要实现一个用户点击...
    99+
    2023-06-22
  • Javascript中怎么实现逐行滚动文字效果
    Javascript中怎么实现逐行滚动文字效果，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。//FILE: scrolltext.js CREATED: DannyKang...
    99+
    2023-06-03
  • JavaScript实现余额数字滚动效果
    目录1.实现背景2.实现思路3.实现过程1.实现背景 上周在一个完成任务领取红包的活动需求中，需要实现一个用户点击按钮弹出领取红包弹窗后，在关 闭弹窗返回原来的页面时，页面余额数字...
    99+
    2022-11-12
  • css如何实现文字循环滚动效果
    这篇文章主要介绍“css如何实现文字循环滚动效果”，在日常操作中，相信很多人在css如何实现文字循环滚动效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css如何实现文字循...
    99+
    2022-10-19
  • 如何使用JavaScript实现字体左右滚动效果
    随着社会的不断发展，前端开发技术也日益成熟。其中，JavaScript作为最主要的Web前端开发语言之一，拥有着丰富的扩展性和可操作性。在实际开发中，我们可以使用JavaScript来实现各种各样的动态效果，如字体左右滚动效果。本篇文章将详...
    99+
    2023-05-14
  • Qt如何实现字幕滚动效果
    这篇文章主要介绍“Qt如何实现字幕滚动效果”，在日常操作中，相信很多人在Qt如何实现字幕滚动效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Qt如何实现字幕滚动效果”的疑惑有所帮助！接下来，请跟着小编一起来...
    99+
    2023-07-02
  • JavaScript怎么实现无间隙文字向上滚动效果
    本篇内容主要讲解“JavaScript怎么实现无间隙文字向上滚动效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript怎么实现无间隙文字向上滚动...
    99+
    2022-10-19
  • js如何实现文字无缝向上滚动效果
    这篇文章给大家分享的是有关js如何实现文字无缝向上滚动效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。静态效果如下：（动态效果复制粘贴下面代码可见）代码如下：<!DOCT...
    99+
    2022-10-19
  • JavaScript如何实现视差滚动效果
    本文小编为大家详细介绍“JavaScript如何实现视差滚动”，内容详细，步骤清晰，细节处理妥当，希望这篇“JavaScript如何实现视差滚动”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。概念视差滚动效果是一种...
    99+
    2023-07-05
  • JavaScript怎么实现余额数字滚动效果
    这篇文章主要介绍“JavaScript怎么实现余额数字滚动效果”，在日常操作中，相信很多人在JavaScript怎么实现余额数字滚动效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大...
    99+
    2022-10-19
  • jquery怎么实现文字上下滚动效果
    你可以使用jQuery的animate()方法来实现文字的上下滚动效果。以下是一个示例代码：HTML部分：```htmlLorem ...
    99+
    2023-08-09
    jquery
  • JavaScript实现长图滚动效果
    本文实例为大家分享了JavaScript之长图滚动的具体代码，供大家参考，具体内容如下 长图的滚动会涉及定时器： 我们先来回顾下定时器： <!DOCTYPE html&g...
    99+
    2022-11-12
  • css如何实现文字从右到左的滚动效果
    这篇文章主要介绍了css如何实现文字从右到左的滚动效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇css如何实现文字从右到左的滚动效果文章都会有所收获，下面我们一起来看看吧。...
    99+
    2022-10-19
  • vue如何实现文字上下滚动跑马灯效果
    Vue可以通过CSS动画和Vue的过渡效果来实现文字上下滚动的跑马灯效果。以下是一个示例代码：```vue{{ text }}...
    99+
    2023-08-08
    vue
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作