溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“如何用javascript實(shí)現(xiàn)文字滾動(dòng)效果”，在日常操作中，相信很多人在如何用javascript實(shí)現(xiàn)文字滾動(dòng)效果問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何用javascript實(shí)現(xiàn)文字滾動(dòng)效果”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！
本文操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
怎么用javascript實(shí)現(xiàn)文字滾動(dòng)？
js實(shí)現(xiàn)文字滾動(dòng)效果
在之前小編已經(jīng)和大家介紹了一些常用的js動(dòng)畫效果，在此，和大家介紹一種可能不太常用的動(dòng)畫效果。該動(dòng)畫效果與文字相關(guān)，且，雖然不常用，但幾乎每個(gè)人都見過它。
相信大家都使用酷狗音樂或是網(wǎng)易云音樂進(jìn)行音樂的搜索，聽鑒，那么久一定會(huì)看到歌詞頁(yè)面中，歌詞滾動(dòng)的效果。此動(dòng)畫效果與其相同，但相對(duì)于這些音樂歌詞效果而言又有些不同，增加了文字豎直排列并且滾動(dòng)的效果。
在介紹之前，先和大家一起了解一些文字垂直排列的方式：
writing-mode屬性
1、取值：
（1）writing-mode：horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl
（2）兼容寫法：-webkit-writing-mode：horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl
（注： lr-tb 和tb-rl在IE中不兼容）
默認(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)容在水平方向上從左向右流入，后一行在前一行的下面。 所有的字形都是豎直向上的。這種布局是羅馬語(yǔ)系使用的（IE）
（5）tb-rl：上-下，右-左。對(duì)象中的內(nèi)容在垂直方向上從上向下流入，自右向左。后一豎行在前一豎行的左面。全角字符是（6）豎直向上的，半角字符如拉丁字母或片假名順時(shí)針旋轉(zhuǎn)90度。這種布局是東亞語(yǔ)系通常使用的（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){
//文字水平排列滾動(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":"也給你千言萬(wàn)語(yǔ)都說不盡的目光"},
{"offset":9000, "text":"這世界總有人在忙忙碌碌尋寶藏"},
{"offset":12000, "text":"卻誤了浮世驕陽(yáng)也錯(cuò)過人間萬(wàn)象"},
{"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");
}到此，關(guān)于“如何用javascript實(shí)現(xiàn)文字滾動(dòng)效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼