Bagaimana untuk melaksanakan penatalan teks menggunakan javascript-tutorial js-php.cn

Cara melaksanakan tatal teks dengan JavaScript: 1. Buat fail sampel HTML; 2. Tambah tag skrip; 3. Laksanakan teks menegak melalui "$(".txtBox").addClass("txtBox_4"); " Hanya susun dan tatal atau tetapkan teks untuk disusun dan ditatal secara mendatar.

Bagaimana untuk melaksanakan penatalan teks menggunakan javascript

Persekitaran pengendalian artikel ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Bagaimana untuk menggunakan javascript untuk menatal teks?

JS melaksanakan kesan menatal teks

kecil sebelum The editor telah pun memperkenalkan beberapa kesan animasi js yang biasa digunakan kepada anda Di sini, saya akan memperkenalkan kepada anda kesan animasi yang mungkin tidak biasa digunakan. Kesan animasi ini berkaitan dengan teks, dan, walaupun tidak biasa digunakan, hampir semua orang pernah melihatnya.

Saya percaya bahawa semua orang menggunakan Kugou Music atau NetEase Cloud Music untuk mencari dan mendengar muzik Setelah sekian lama, anda pasti akan melihat kesan menatal lirik pada halaman lirik. Kesan animasi ini adalah sama dengannya, tetapi ia agak berbeza daripada kesan lirik muzik ini, menambah kesan susunan teks menegak dan menatal.

Sebelum memperkenalkan, mari belajar tentang beberapa cara penyusunan teks menegak:

atribut mod penulisan

Nilai:
( 1) menulis- mod: horizontal-tb |. menegak-lr | -tb |. tb-rl
(Nota: lr-tb dan tb-rl tidak serasi dalam IE)
Nilai lalai: normal
Berkenaan dengan: kecuali kumpulan baris jadual, jadual - Semua elemen kecuali kumpulan lajur, baris jadual, lajur jadual
Warisan: Ya
Animasi: Tidak
Nilai dikira: Nilai khusus

2. mod penulisan Pengenalan kepada nilai

(1) horizontal-tb: kaedah penulisan atas-bawah mendatar. Iaitu, kiri-kanan-atas-bawah (serupa dengan nilai peribadi IE lr-tb)
(2) menegak-rl: ditulis secara menegak dari kanan ke kiri. Iaitu, atas-bawah-kanan-kiri (serupa dengan nilai peribadi IE tb-rl)
(3) menegak-lr: tulisan menegak dari kiri ke kanan. Iaitu, atas-bawah-kiri-kanan
(4) lr-tb: kiri-kanan, atas-bawah. Kandungan objek mengalir secara mendatar dari kiri ke kanan, dengan baris seterusnya di bawah baris sebelumnya. Semua glyph adalah menegak dan ke atas. Reka letak ini digunakan dalam bahasa Rom (IE)
(5) tb-rl: atas-bawah, kanan-kiri. Kandungan dalam objek mengalir secara menegak dari atas ke bawah dan dari kanan ke kiri. Baris menegak seterusnya berada di sebelah kiri baris menegak sebelumnya. Aksara lebar penuh ialah (6) ditunjuk lurus ke atas, dan aksara separuh lebar seperti huruf Latin atau katakana diputar 90 darjah mengikut arah jam. Reka letak ini biasanya digunakan dalam bahasa Asia Timur (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>

Salin selepas log masuk

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;}

Salin selepas log masuk

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

Salin selepas log masuk

Pembelajaran yang disyorkan: "

Tutorial Asas JavaScript"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan penatalan teks menggunakan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!