js实现文字滚动效果

news/2024/7/19 13:16:24 标签: 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:

js xml">js-tag"><js-title">body js-attribute">style=js-value">"font-size: 12px;" >
    js-tag"><js-title">section js-attribute">class=js-value">"topBox">
        js-tag"><js-title">div js-attribute">class=js-value">"topBoxTxt">
           js-tag"><js-title">ul js-attribute">class=js-value">"txtBox" js-attribute">id=js-value">"txtBox">

           js-tag"></js-title">ul>
        js-tag"></js-title">div>
    js-tag"></js-title">section>

    js-tag"><js-title">script js-attribute">type=js-value">"text/javascript" js-attribute">src=js-value">"index.js" >js-tag"></js-title">script>
    js-tag"><js-title">script>
        (js-function">js-keyword">functionjs-params">(win){
            js-comment">//文字水平排列滚动
        js-comment">//          hor();
        js-comment">//          horizontal(0);

            js-comment">//文字垂直排列滚动
            $(js-string">".txtBox").addClass(js-string">"txtBox_4");
            ver();
            vertical(js-number">0);

            js-comment">//移动端适配
            js-keyword">var doc = win.document;
            js-keyword">var docEl = doc.documentElement;
            js-keyword">var tid;
            js-function">js-keyword">function js-title">refreshRemjs-params">() {
                js-keyword">var width = docEl.getBoundingClientRect().width
                js-keyword">if (width > js-number">768) { 
                    width = js-number">768;
                }
                js-keyword">var rem = width / js-number">7.5;
                docEl.style.fontSize = rem + js-string">'px';
                docEl.style.fontSize = rem + js-string">'px';
                docEl.style.fontSize = rem + js-string">'px';
            }
            win.addEventListener(js-string">'resize', js-function">js-keyword">functionjs-params">() {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, js-number">300);
            }, js-literal">false);
            win.addEventListener(js-string">'pageshow', js-function">js-keyword">functionjs-params">(e) {
                js-keyword">if (e.persisted) {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, js-number">300);
                }
            }, js-literal">false);
            refreshRem();
        })(window);
    js-tag"></js-title">script>
js-tag"></js-title">body>

css:

js css">js-tag">body,js-tag">htmljs-rules">{
   js-rule">js-attribute">width:js-value">js-number">100%;
    js-rule">js-attribute">height:js-value">js-number">100%;
    js-rule">js-attribute">position:js-value"> relative;
    js-rule">js-attribute">background:js-value"> js-hexcolor">#232226;
    js-rule">js-attribute">overflow-y:js-value"> auto;
    js-rule">js-attribute">overflow-x:js-value"> hidden;
js-rule">}
js-class">.topBox,js-class">.topBoxTxtjs-rules">{
    js-rule">js-attribute">width:js-value">js-number">100%;
    js-rule">js-attribute">height:js-value">auto;
    js-rule">js-attribute">position:js-value"> relative;
js-rule">}
js-class">.topBoxTxtjs-rules">{
    js-rule">js-attribute">text-align:js-value"> center;
    js-rule">js-attribute">height:js-value">auto;js-rule">;
    js-rule">js-attribute">color:js-value">js-hexcolor">#fff;
    js-rule">js-attribute">font-size:js-value"> js-number">0.36rem;
    js-rule">js-attribute">padding-top:js-value">js-number">55px;
js-rule">}
js-class">.txtBoxjs-rules">{
    js-rule">js-attribute">width:js-value"> js-number">5.6rem;
    js-rule">js-attribute">height:js-value"> js-number">5.2rem;
    js-rule">js-attribute">margin:js-value">js-number">0 auto;
    js-rule">js-attribute">overflow-y:js-value"> scroll;
js-rule">}
   js-class">.txtBox>js-tag">lijs-rules">{
            js-rule">js-attribute">opacity:js-value"> js-number">0.5;
            js-rule">js-attribute">height:js-value">js-number">0.74rem;
js-rule">}
   js-class">.txtBox>js-tag">lijs-pseudo">:first-childjs-rules">{
      js-rule">js-attribute">padding-top:js-value">js-number">60px;
   js-rule">}
js-class">.txtBox>js-tag">lijs-class">.hotColorjs-rules">{
    js-rule">js-attribute">opacity:js-value"> js-number">1;
js-rule">}
js-class">.txtBox_4js-rules">{
    js-rule">js-attribute">width:js-value">js-number">4.6rem;
    js-rule">js-attribute">height:js-value"> js-number">7.5rem;
    js-rule">js-attribute">overflow-x:js-value"> auto;
    js-rule">js-attribute">white-space:js-value"> nowrap;
    js-rule">js-attribute">display:js-value"> block;
js-rule">}
js-class">.txtBox_4>js-tag">lijs-rules">{
    js-rule">js-attribute">writing-mode:js-value">tb-rl;
    js-rule">js-attribute">writing-mode:js-value">vertical-rl;
    js-rule">js-attribute">-webkit-writing-mode:js-value"> vertical-rl;
    js-rule">js-attribute">height:js-value"> js-number">0;
    js-rule">js-attribute">line-height:js-value"> js-number">0.75rem;
    js-rule">js-attribute">word-wrap:js-value">break-word;
js-rule">}
js-class">.txtBox_4>js-tag">lijs-rules">{
    js-rule">js-attribute">width:js-value">js-number">0.4rem;
    js-rule">js-attribute">text-align:js-value"> center;
    js-rule">js-attribute">margin:js-value">js-number">0 js-number">0.1rem;
    js-rule">js-attribute">display:js-value"> inline-table;
    js-rule">js-attribute">position:js-value"> relative;
js-rule">}

index.js:

js javascript">js-keyword">var freq=js-number">10;js-comment">//滚动频率
js-keyword">var fraction=js-number">9/js-number">10;js-comment">// 水平文字高亮显示行在歌词显示区域中的固定位置百分比
js-keyword">var frac=js-number">3/js-number">10;js-comment">// 垂直文字高亮显示行在歌词显示区域中的固定位置百分比   
js-keyword">var timer=js-literal">true;js-comment">//定时器
js-keyword">var num=-js-number">1;js-comment">//当前行下标
js-keyword">var time;js-comment">//滚动距离
js-keyword">var eul = document.getElementById(js-string">"txtBox");
js-keyword">var lis=[
    {js-string">"offset":js-number">3000, js-string">"text":js-string">"我总是轻描淡写告诉你我的愿望"},
    {js-string">"offset":js-number">6000, js-string">"text":js-string">"也给你千言万语都说不尽的目光"},
    {js-string">"offset":js-number">9000, js-string">"text":js-string">"这世界总有人在忙忙碌碌寻宝藏"},
    {js-string">"offset":js-number">12000, js-string">"text":js-string">"却误了浮世骄阳也错过人间万象"},
    {js-string">"offset":js-number">15000, js-string">"text":js-string">"古城里长桥上"},
    {js-string">"offset":js-number">18000, js-string">"text":js-string">"人如海车成行"},
    {js-string">"offset":js-number">21000, js-string">"text":js-string">"你笑得像光芒"},
    {js-string">"offset":js-number">24000, js-string">"text":js-string">"蓦然把我照亮"},
    {js-string">"offset":js-number">27000, js-string">"text":js-string">"风轻扬夏未央"},
    {js-string">"offset":js-number">30000, js-string">"text":js-string">"林荫路单车响"},
    {js-string">"offset":js-number">33000, js-string">"text":js-string">"原来所谓爱情"},
    {js-string">"offset":js-number">36000, js-string">"text":js-string">"是这模样"},
    {js-string">"offset":js-number">39000, js-string">"text":js-string">""}
]
js-keyword">var count=lis.length%js-number">7+js-number">5;

js-comment">//文字水平排列滚动
js-function">js-keyword">function  js-title">horjs-params">(){
    js-keyword">for (js-keyword">var i = js-number">0; i <lis.length; i++) {
        js-keyword">var eli = document.createElement(js-string">"li");
        eli.innerText = lis[i].text;
        eul.appendChild(eli);
    }
     js-keyword">for(js-keyword">var j=js-number">0;j<count;j++){
        js-keyword">var eli = document.createElement(js-string">"li");
        eli.innerText =js-string">"";
        eul.appendChild(eli);
    }
}

js-function">js-keyword">function js-title">horizontaljs-params">(lineno){
    common(lineno,horizontal);

    js-keyword">var scrollTop;
    js-keyword">var ep = eul.children[lineno];
    js-keyword">if(js-number">30<ep.offsetTop<eul.clientHeight*fraction){
        scrollTop=ep.offsetTop;
    }js-keyword">else js-keyword">if(ep.offsetTop>(eul.scrollHeight-eul.clientHeight*(js-number">1-fraction))){
        scrollTop=eul.scrollHeight-eul.clientHeight;
    }js-keyword">else{
        scrollTop=ep.offsetTop=eul.clientHeight*fraction;
    }

    js-comment">// 如用户拖动滚动条导致当前显示行超出显示区域范围，下一行直接定位到当前显示行
    js-keyword">if (eul.scrollTop > (scrollTop + eul.clientHeight*fraction)|| (eul.scrollTop + eul.clientHeight*fraction) < scrollTop){
        eul.scrollTop = scrollTop;
    }js-keyword">else { 
        js-keyword">var step = js-built_in">Math.ceil(js-built_in">Math.abs(eul.scrollTop - scrollTop)/(time/freq));
        scrollT(eul.scrollTop, scrollTop, step);
    }
}

js-function">js-keyword">function js-title">scrollTjs-params">(crt, dst, step){
    js-keyword">if(js-built_in">Math.abs(crt - dst) < step){
        js-keyword">return;
    }
     js-keyword">if(crt < dst){
        eul.scrollTop += step;
        crt += step;
    }
    js-keyword">else {
        eul.scrollTop -= step;
        crt -= step;
    }
    setTimeout(scrollT.bind(js-keyword">this, crt, dst, step), freq);
};


js-comment">//文字垂直排列滚动
js-function">js-keyword">function js-title">verjs-params">(){
    console.log(eul)
    js-keyword">for (js-keyword">var i = js-number">0; i <lis.length; i++) {
        js-keyword">var eli = document.createElement(js-string">"li");
        eli.innerHTML = lis[i].text;
        eul.appendChild(eli);
        js-keyword">if(eli.innerText.length<js-number">15){
            eli.style.marginBottom=(js-number">15-eli.innerText.length)+js-string">"em";
        }
    }
    js-keyword">for(js-keyword">var j=js-number">0;j<count;j++){
        js-keyword">var eli = document.createElement(js-string">"li");
        eli.innerText =js-string">"";
        eul.appendChild(eli);
    }
}

js-function">js-keyword">function js-title">verticaljs-params">(lineno){
    common(lineno,vertical);

    js-keyword">var scrollLeft;
    js-keyword">var ep = eul.children[lineno];
    js-keyword">if (ep.offsetLeft < eul.clientWidth*frac){
        scrollLeft = js-number">0;
    } js-keyword">else js-keyword">if (ep.offsetLeft > (eul.scrollWidth - eul.clientWidth*(js-number">1-frac))){
        scrollLeft = eul.scrollWidth - eul.clientWidth;
    } js-keyword">else {
        scrollLeft = ep.offsetLeft - eul.clientWidth*frac;
    }

    js-comment">// 如用户拖动滚动条导致当前显示行超出显示区域范围，下一行直接定位到当前显示行
    js-keyword">if (eul.scrollLeft > (scrollLeft + eul.clientWidth*frac)|| (eul.scrollLeft + eul.clientWidth*frac) < scrollLeft){
        eul.scrollLeft = scrollLeft;
    } js-keyword">else { 
        js-keyword">var step = js-built_in">Math.ceil(js-built_in">Math.abs(eul.scrollLeft - scrollLeft)/(time/freq));
        scrollL(eul.scrollLeft, scrollLeft, step);
    }
}

js-function">js-keyword">function js-title">scrollLjs-params">(crt, dst, step){
    js-keyword">if(js-built_in">Math.abs(crt - dst) < step){
        js-keyword">return;
    }
    js-keyword">if(crt < dst){
        eul.scrollLeft += step;
        crt += step;
    } js-keyword">else {
        eul.scrollLeft -= step;
        crt -= step;
    }
    setTimeout(scrollL.bind(js-keyword">this, crt, dst, step), freq);
}

js-function">js-keyword">function js-title">commonjs-params">(lineno,fn){
    js-keyword">if (lineno ==js-number">0) {
        time = lis[lineno].offset; 
    } js-keyword">else {
        time = lis[lineno].offset - lis[lineno-js-number">1].offset;
    }
    timer = setTimeout(fn.bind(js-keyword">this, lineno+js-number">1), time);
    num=lineno;

    js-comment">//若滚动到最后一行，则从头开始,并把每一行文字均取消高亮
    js-keyword">if(lineno==lis.length-js-number">1){
        js-keyword">for(js-keyword">var i=js-number">0;i<(eul.children).length-js-number">1;i++){
            eul.children[i].setAttribute(js-string">"class", js-string">"");
        }
        lineno=js-number">0;
        timer = setTimeout(fn.bind(js-keyword">this, lineno), time);
    }
    js-keyword">if (lineno > js-number">0) {
        eul.children[lineno-js-number">1].setAttribute(js-string">"class", js-string">"");
    }
    js-keyword">var ep = eul.children[lineno];
    ep.setAttribute(js-string">"class", js-string">"hotColor");
}

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


http://www.niftyadmin.cn/n/1202790.html

相关文章

django ORM(二)

django ORM(二)

1.常用的模型字段类型https://docs.djangoproject.com/en/2.1/ref/models/fields/#field-types 1. IntegerField : 整型&#xff0c;映射到数据库中的int类型。 2. CharField: 字符类型&#xff0c;映射到数据库中的varchar类型&#xff0c;通过max_length指定最大长度。 3. T…
阅读更多...
mpvue——基于vue的小程序开发框架

mpvue——基于vue的小程序开发框架

mpvue 是一款使用 Vue.js 开发微信小程序的前端框架。使用此框架&#xff0c;开发者将得到完整的 Vue.js 开发体验&#xff0c;同时为 H5 和小程序提供了代码复用的能力。 1、全局安装cli npm install –global vue-cli 2、创建一个基于 mpvue-quickstart 模板的新项目 vue…
阅读更多...
sql 递归（查找一个节点下的所有节点）

sql 递归（查找一个节点下的所有节点）

--这是查找菜单 第一行是一级菜单&#xff0c;下面是二级菜单 with temp as (select MenuCode,ParentCode,MenuName,URL,1 as curMenuLevelfrom sys_menuwhere (ParentCode is null or ParentCode ) and MenuCodepmsunion allselect a.MenuCode,a.ParentCode,a.MenuName,a.…
阅读更多...
js复制内容至剪切板并弹出toast

js复制内容至剪切板并弹出toast

如今&#xff0c;无论是App亦或是PC&#xff0c;当存在复制操作时&#xff0c;相信每一个都不会自己动手进行输入。而&#xff0c;复制成功之后&#xff0c;如何将其复制在剪切板中&#xff0c;我们粘贴就可以。这个问题&#xff0c;如果不是今天存在这样的需求&#xff0c;估计…
阅读更多...
表单通过连接数据库数据进行验证

表单通过连接数据库数据进行验证

//jsp 文件中对于输入姓名框的验证 idusername 提示信息为idusernameinfo $(function(){ $("#username").blur(function(){ //1 获得input 框用户输入的值 var usernameInput $(this).val();//$("#username").val();获…
阅读更多...
AVG.js ——面向未来的文字冒险游戏框架

AVG.js ——面向未来的文字冒险游戏框架

AVG.js 是一款开源 Web 游戏框架&#xff0c;以成为新一代的 AVG 类游戏制作框架为目标&#xff0c;兼顾与之相近的其他游戏类型&#xff0c;例如解谜、卡牌等。 一、 1、安装 npm install -g avg-cli 2、创建 avg create mygame 3、创建时相关项的填写 $ avg create my…
阅读更多...
Android音视频开发笔记(三)--实时相机滤镜使用Android自带硬编码录制视频

Android音视频开发笔记(三)--实时相机滤镜使用Android自带硬编码录制视频

本来按照计划&#xff0c;笔者应该在这篇文章给大家介绍如何使用EGL API创建自定义OpenGL环境&#xff0c;但是在写demo的过程中反复思考&#xff0c;与其做单个的demo功能还不如写一个app&#xff0c;也方便大家在开发工作中根据使用场景来借鉴代码和思路。so&#xff0c;在这…
阅读更多...
js动画效果（二）

js动画效果（二）

如今&#xff0c;越来愈多的页面动效都依赖于动效插件&#xff0c;插件的封装和使用&#xff0c;大大减少了前端人员实现动效的时间和经历&#xff0c;提高了效率。如今&#xff0c;页面中使用到的大多都是常见的动效&#xff0c;有些动效&#xff0c;由于不常用&#xff0c;只…
阅读更多...
最新文章

Copyright @ 2022~2023