怎麼用javascript實現文字滾動-js教程-PHP中文網

首頁

web前端

js教程

怎麼用javascript實現文字滾動

藏色散人

Sep 14, 2021 am 11:24 AM

javascript

javascript實作文字捲動的方法：1、建立一個HTML範例檔案；2、新增script標籤；3、透過「$(".txtBox").addClass("txtBox_4");」實作文字垂直排列滾動或設定文字水平排列滾動即可。

怎麼用javascript實現文字滾動

本文操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

怎麼用javascript實作文字滾動？

js實作文字捲動效果

在之前小編者已經跟大家介紹了一些常用的js動畫效果，在此，跟大家介紹一個可能不太常用的動畫效果。該動畫效果與文字相關，且，雖然不常用，但幾乎每個人都看過它。

相信大家都使用酷狗音樂或是網易雲音樂進行音樂的搜索，聽鑑，那麼久一定會看到歌詞頁面中，歌詞滾動的效果。此動畫效果與其相同，但相對於這些音樂歌詞效果而言又有些不同，增加了文字垂直排列並且滾動的效果。

在介紹之前，先和大家一起了解一些文字垂直排列的方式：

writing-mode屬性

#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 + &#39;px&#39;;
                docEl.style.fontSize = rem + &#39;px&#39;;
                docEl.style.fontSize = rem + &#39;px&#39;;
            }
            win.addEventListener(&#39;resize&#39;, function() {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }, false);
            win.addEventListener(&#39;pageshow&#39;, 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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。