javascript實作文字捲動的方法:1、建立一個HTML範例檔案;2、新增script標籤;3、透過「$(".txtBox").addClass("txtBox_4");」實作文字垂直排列滾動或設定文字水平排列滾動即可。
本文操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。
怎麼用javascript實作文字滾動?
js實作文字捲動效果
在之前小編者已經跟大家介紹了一些常用的js動畫效果,在此,跟大家介紹一個可能不太常用的動畫效果。該動畫效果與文字相關,且,雖然不常用,但幾乎每個人都看過它。
相信大家都使用酷狗音樂或是網易雲音樂進行音樂的搜索,聽鑑,那麼久一定會看到歌詞頁面中,歌詞滾動的效果。此動畫效果與其相同,但相對於這些音樂歌詞效果而言又有些不同,增加了文字垂直排列並且滾動的效果。
在介紹之前,先和大家一起了解一些文字垂直排列的方式:
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中不相容)
預設值:normal
適用於:除table-row-group, table -column-group, table-row, table-column 以外的所有元素
繼承性:有
動畫性:否
計算值:特定值
#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:左-右,上-下。物件中的內容在水平方向上從左向右流入,後一行在前一行的下方。所有的字形都是垂直向上的。這個佈局是羅馬語系使用的(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 + '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;//滚动频率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基礎教學》
以上是怎麼用javascript實現文字滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章!