快捷導(dǎo)航

js實(shí)現(xiàn)文字滾動(dòng)的效果

更新時(shí)間：2022年06月19日 11:15:28 作者：lavendersue

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)文字滾動(dòng)的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)文字滾動(dòng)的效果的具體代碼，供大家參考，具體內(nèi)容如下

在之前小編已經(jīng)和大家介紹了一些常用的js動(dòng)畫效果，在此，和大家介紹一種可能不太常用的動(dòng)畫效果。該動(dòng)畫效果與文字相關(guān)，且，雖然不常用，但幾乎每個(gè)人都見過它。相信大家都使用酷狗音樂或是網(wǎng)易云音樂進(jìn)行音樂的搜索，聽鑒，那么久一定會(huì)看到歌詞頁面中，歌詞滾動(dòng)的效果。此動(dòng)畫效果與其相同，但相對(duì)于這些音樂歌詞效果而言又有些不同，增加了文字豎直排列并且滾動(dòng)的效果。

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

1、取值：

默認(rèn)值：normal
適用于：除 table-row-group, table-column-group, table-row, table-column 之外的所有元素
繼承性：有
動(dòng)畫性：否
計(jì)算值：特定值

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：左-右，上-下。對(duì)象中的內(nèi)容在水平方向上從左向右流入，后一行在前一行的下面。所有的字形都是豎直向上的。這種布局是羅馬語系使用的（IE）
（5）tb-rl：上-下，右-左。對(duì)象中的內(nèi)容在垂直方向上從上向下流入，自右向左。后一豎行在前一豎行的左面。全角字符是（6）豎直向上的，半角字符如拉丁字母或片假名順時(shí)針旋轉(zhuǎn)90度。這種布局是東亞語系通常使用的（IE）

html:

<body style="font-size: 12px;" >
? ? <section class="topBox">
? ? ? ? <div class="topBoxTxt">
? ? ? ? ? ?<ul class="txtBox" id="txtBox">

? ? ? ? ? ?</ul>
? ? ? ? </div>
? ? </section>

? ? <script type="text/javascript" src="index.js" ></script>
? ? <script>
? ? ? ? (function(win){
? ? ? ? ? ? //文字水平排列滾動(dòng)
? ? ? ? // ? ? ? ? ?hor();
? ? ? ? // ? ? ? ? ?horizontal(0);

? ? ? ? ? ? //文字垂直排列滾動(dòng)
? ? ? ? ? ? $(".txtBox").addClass("txtBox_4");
? ? ? ? ? ? ver();
? ? ? ? ? ? vertical(0);

? ? ? ? ? ? //移動(dòng)端適配
? ? ? ? ? ? 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 + 'px';
? ? ? ? ? ? ? ? docEl.style.fontSize = rem + 'px';
? ? ? ? ? ? ? ? docEl.style.fontSize = rem + 'px';
? ? ? ? ? ? }
? ? ? ? ? ? win.addEventListener('resize', function() {
? ? ? ? ? ? ? ? clearTimeout(tid);
? ? ? ? ? ? ? ? tid = setTimeout(refreshRem, 300);
? ? ? ? ? ? }, false);
? ? ? ? ? ? win.addEventListener('pageshow', 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;//滾動(dòng)頻率
var fraction=9/10;// 水平文字高亮顯示行在歌詞顯示區(qū)域中的固定位置百分比
var frac=3/10;// 垂直文字高亮顯示行在歌詞顯示區(qū)域中的固定位置百分比 ??
var timer=true;//定時(shí)器
var num=-1;//當(dāng)前行下標(biāo)
var time;//滾動(dòng)距離
var eul = document.getElementById("txtBox");
var lis=[
? ? {"offset":3000, "text":"我總是輕描淡寫告訴你我的愿望"},
? ? {"offset":6000, "text":"也給你千言萬語都說不盡的目光"},
? ? {"offset":9000, "text":"這世界總有人在忙忙碌碌尋寶藏"},
? ? {"offset":12000, "text":"卻誤了浮世驕陽也錯(cuò)過人間萬象"},
? ? {"offset":15000, "text":"古城里長(zhǎng)橋上"},
? ? {"offset":18000, "text":"人如海車成行"},
? ? {"offset":21000, "text":"你笑得像光芒"},
? ? {"offset":24000, "text":"驀然把我照亮"},
? ? {"offset":27000, "text":"風(fēng)輕揚(yáng)夏未央"},
? ? {"offset":30000, "text":"林蔭路單車響"},
? ? {"offset":33000, "text":"原來所謂愛情"},
? ? {"offset":36000, "text":"是這模樣"},
? ? {"offset":39000, "text":""}
]
var count=lis.length%7+5;

//文字水平排列滾動(dòng)
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;
? ? }

? ? // 如用戶拖動(dòng)滾動(dòng)條導(dǎo)致當(dāng)前顯示行超出顯示區(qū)域范圍，下一行直接定位到當(dāng)前顯示行
? ? 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);
};


//文字垂直排列滾動(dòng)
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;
? ? }

? ? // 如用戶拖動(dòng)滾動(dòng)條導(dǎo)致當(dāng)前顯示行超出顯示區(qū)域范圍，下一行直接定位到當(dāng)前顯示行
? ? 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;

? ? //若滾動(dòng)到最后一行，則從頭開始,并把每一行文字均取消高亮
? ? 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");
}

其中滾動(dòng)時(shí)有些小瑕疵，若想嘗試的朋友，就請(qǐng)自行修改，小編就提供幫助到此，還請(qǐng)記得引入jq文件哦

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: