這篇文章主要介紹“如何用javascript實(shí)現(xiàn)文字滾動(dòng)效果”,在日常操作中,相信很多人在如何用javascript實(shí)現(xiàn)文字滾動(dòng)效果問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”如何用javascript實(shí)現(xiàn)文字滾動(dòng)效果”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
目前創(chuàng)新互聯(lián)已為上1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、湖口網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。
本文操作環(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)畫(huà)效果,在此,和大家介紹一種可能不太常用的動(dòng)畫(huà)效果。該動(dòng)畫(huà)效果與文字相關(guān),且,雖然不常用,但幾乎每個(gè)人都見(jiàn)過(guò)它。
相信大家都使用酷狗音樂(lè)或是網(wǎng)易云音樂(lè)進(jìn)行音樂(lè)的搜索,聽(tīng)鑒,那么久一定會(huì)看到歌詞頁(yè)面中,歌詞滾動(dòng)的效果。此動(dòng)畫(huà)效果與其相同,但相對(duì)于這些音樂(lè)歌詞效果而言又有些不同,增加了文字豎直排列并且滾動(dòng)的效果。
在介紹之前,先和大家一起了解一些文字垂直排列的方式:
writing-mode屬性
1、取值:
(1)writing-mode:horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl
(2)兼容寫(xiě)法:-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)畫(huà)性:否
計(jì)算值:特定值
2、writing-mode的取值介紹
(1)horizontal-tb:水平方向自上而下的書(shū)寫(xiě)方式。即 left-right-top-bottom(類(lèi)似IE私有值lr-tb)
(2)vertical-rl:垂直方向自右而左的書(shū)寫(xiě)方式。即 top-bottom-right-left(類(lèi)似IE私有值tb-rl)
(3)vertical-lr:垂直方向自左而右的書(shū)寫(xiě)方式。即 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":"我總是輕描淡寫(xiě)告訴你我的愿望"}, {"offset":6000, "text":"也給你千言萬(wàn)語(yǔ)都說(shuō)不盡的目光"}, {"offset":9000, "text":"這世界總有人在忙忙碌碌尋寶藏"}, {"offset":12000, "text":"卻誤了浮世驕陽(yáng)也錯(cuò)過(guò)人間萬(wàn)象"}, {"offset":15000, "text":"古城里長(zhǎng)橋上"}, {"offset":18000, "text":"人如海車(chē)成行"}, {"offset":21000, "text":"你笑得像光芒"}, {"offset":24000, "text":"驀然把我照亮"}, {"offset":27000, "text":"風(fēng)輕揚(yáng)夏未央"}, {"offset":30000, "text":"林蔭路單車(chē)響"}, {"offset":33000, "text":"原來(lái)所謂愛(ài)情"}, {"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)到最后一行,則從頭開(kāi)始,并把每一行文字均取消高亮 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)注創(chuàng)新互聯(lián)網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
當(dāng)前題目:如何用javascript實(shí)現(xiàn)文字滾動(dòng)效果
本文鏈接:http://muchs.cn/article20/jojcjo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、云服務(wù)器、、電子商務(wù)、軟件開(kāi)發(fā)、網(wǎng)站導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)