Comment implémenter le défilement de texte en utilisant javascript-js tutoriel-php.cn

Comment implémenter le défilement de texte avec JavaScript : 1. Créez un exemple de fichier HTML ; 2. Ajoutez des balises de script ; 3. Utilisez "$(".txtBox").addClass("txtBox_4");" réglage Le texte peut être disposé horizontalement et défilé.

Comment implémenter le défilement de texte en utilisant javascript

L'environnement d'exploitation de cet article : système Windows 7, version JavaScript 1.8.5, ordinateur Dell G3.

Comment implémenter le défilement de texte en utilisant javascript ?

js pour obtenir un effet de défilement de texte

Avant, l'éditeur vous a présenté quelques effets d'animation js couramment utilisés. Ici, je vais vous présenter un effet d'animation qui n'est peut-être pas couramment utilisé. utilisé. . Cet effet d’animation est lié au texte et, bien que peu utilisé, presque tout le monde l’a vu.

Je crois que tout le monde utilise Kugou Music ou NetEase Cloud Music pour rechercher et écouter de la musique Après un long moment, vous verrez certainement l'effet de défilement des paroles sur la page des paroles. Cet effet d'animation est le même, mais il est quelque peu différent de ces effets de paroles de musique, ajoutant l'effet de disposition verticale du texte et de défilement.

Avant de présenter, découvrons quelques méthodes d'arrangement vertical du texte :

attribut de mode d'écriture

1 Valeur :
(1) mode d'écriture : horizontal-tb | vertical-rl | tb | tb-rl
(2) Écriture compatible : -webkit-writing-mode : horizontal-tb | vertical-lr | non compatible dans IE)
Valeur par défaut : normal
Applicable à : tous les éléments sauf table-row-group, table-column-group, table-row, table-column
Héritage : Oui
Propriété d'animation : Non
Valeur calculée : Spécifique value

2. Introduction à la valeur du mode d'écriture

(1) horizontal-tb : méthode d'écriture horizontale descendante. Autrement dit, gauche-droite-haut-bas (similaire à la valeur privée d'IE lr-tb)
(2) vertical-rl : écrit verticalement de droite à gauche. C'est-à-dire haut-bas-droit-gauche (similaire à la valeur privée d'IE tb-rl)
(3) vertical-lr : écriture verticale de gauche à droite. C'est-à-dire haut-bas-gauche-droite
(4) lr-tb : gauche-droite, haut-bas. Le contenu de l'objet s'écoule horizontalement de gauche à droite, la ligne suivante étant située en dessous de la ligne précédente. Tous les glyphes sont verticaux et vers le haut. Cette disposition est utilisée dans les langues romaines (IE)
(5) tb-rl : haut-bas, droite-gauche. Le contenu d'un objet circule verticalement de haut en bas et de droite à gauche. La ligne verticale suivante se trouve à gauche de la ligne verticale précédente. Les caractères pleine chasse sont (6) pointés vers le haut, les caractères demi-chasse tels que les lettres latines ou les katakana pivotent de 90 degrés dans le sens des aiguilles d'une montre. Cette mise en page est couramment utilisée dans les langues d'Asie de l'Est (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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Apprentissage recommandé : "

Tutoriel de base javascript"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!