자바스크립트를 사용하여 텍스트 스크롤을 구현하는 방법-JS 튜토리얼-php.cn

JavaScript로 텍스트 스크롤을 구현하는 방법: 1. HTML 샘플 파일을 생성합니다. 2. 스크립트 태그를 추가합니다. 3. "$(".txtBox").addClass("txtBox_4");"를 사용하여 수직 텍스트 스크롤을 구현합니다. 설정 텍스트를 가로로 정렬하고 스크롤할 수 있습니다.

자바스크립트를 사용하여 텍스트 스크롤을 구현하는 방법

이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

자바스크립트를 사용하여 텍스트 스크롤을 구현하는 방법은 무엇입니까?

js를 사용하여 텍스트 스크롤 효과

이전에 편집자가 일반적으로 사용되는 몇 가지 js 애니메이션 효과를 소개했습니다. 여기서는 일반적이지 않을 수 있는 애니메이션 효과를 소개하겠습니다. 사용된. . 이 애니메이션 효과는 텍스트와 관련이 있으며 일반적으로 사용되지는 않지만 거의 모든 사람이 본 적이 있습니다.

모두가 Kugou Music이나 NetEase Cloud Music을 사용하여 음악을 검색하고 듣는다고 믿습니다. 오랜 시간이 지나면 가사 페이지에서 가사 스크롤 효과를 확실히 볼 수 있을 것입니다. 이 애니메이션 효과는 그것과 동일하지만, 세로 텍스트 배열과 스크롤 효과를 추가한 점에서 이러한 음악 가사 효과와 다소 다릅니다.

소개하기 전에 몇 가지 세로 텍스트 정렬 방법에 대해 알아보겠습니다.

writing-mode 속성

2. writing-mode의 가치 소개

(1) horizon-tb : 수평 하향식 글쓰기 방식. 즉, 왼쪽-오른쪽-위-아래(IE 프라이빗 값 lr-tb와 유사)
(2) 수직-rl: 오른쪽에서 왼쪽으로 세로로 씁니다. 즉, 상-하-우-좌(IE 프라이빗 값 tb-rl과 유사)
(3) 수직-lr: 왼쪽에서 오른쪽으로 세로 쓰기. 그것은 상-하-좌-우
(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 기본 튜토리얼"

위 내용은 자바스크립트를 사용하여 텍스트 스크롤을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!