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"><div class="topBoxTxt"><ul class="txtBox" id="txtBox"></ul></div></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().widthif (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");
}

其中滚动时有些小瑕疵，若想尝试的朋友，就请自行修改，小编就提供帮助到此，还请记得引入jq文件哦~

js实现文字滚动效果相关推荐

js简单文字滚动显示
js简单文字滚动显示 1. html内容 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
js歌词逐字滚动效果
js歌词逐字滚动效果 @Null - 滨先上效果图目录结构: 歌词文本music.txt 将酷狗歌词KRC用"酷狗歌词(krc)加解密工具"进行解密后可以得到这种歌词文本 HT ...
js实现抽奖滚动效果
目录一.效果展示二.代码说话三.总结经验一.效果展示本文介绍js实现抽奖滚动效果的实现过程.具体效果如下图: 二.代码说话话不多说,上代码最实在. 1.scroll.js var Scro ...
JS 实现消息滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
js实现title滚动效果
js实现title滚动效果原理:取第一个字符,放到尾部,定时循环操作,在视觉就有滚动效果了.直接上代码了方式一 var titleText = "您有新订单,请及时处理!".s ...
页面实现文字滚动效果(跑马灯)
页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用ma ...
JS原生---歌词滚动效果案例
[开门见山] 实现目标: 需要让歌词列表随着播放的时间更新而滚动,即实时的跟随歌曲的进度而滚动效果: 需要事先准备的东西: 1.音频(mp3格式): 2.歌词(详细): 先展示html和css的实现 ...
HTML实现公告文字滚动效果
效果图: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
html完成公告滚动条,原生js实现公告滚动效果
本文实例为大家分享了js实现公告滚动展示的具体代码,供大家参考,具体内容如下 1.html结构我是公告1 我是公告2 我是公告3 我是公告4 2.css样式 body, div, ul, li { ...

js实现文字滚动效果

js实现文字滚动效果相关推荐

最新文章

热门文章