经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
js实现文字滚动的效果
来源:jb51  时间:2022/6/20 8:40:46  对本文有异议

本文实例为大家分享了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:

  1. <body style="font-size: 12px;" >
  2. ? ? <section class="topBox">
  3. ? ? ? ? <div class="topBoxTxt">
  4. ? ? ? ? ? ?<ul class="txtBox" id="txtBox">
  5.  
  6. ? ? ? ? ? ?</ul>
  7. ? ? ? ? </div>
  8. ? ? </section>
  9.  
  10. ? ? <script type="text/javascript" src="index.js" ></script>
  11. ? ? <script>
  12. ? ? ? ? (function(win){
  13. ? ? ? ? ? ? //文字水平排列滚动
  14. ? ? ? ? // ? ? ? ? ?hor();
  15. ? ? ? ? // ? ? ? ? ?horizontal(0);
  16.  
  17. ? ? ? ? ? ? //文字垂直排列滚动
  18. ? ? ? ? ? ? $(".txtBox").addClass("txtBox_4");
  19. ? ? ? ? ? ? ver();
  20. ? ? ? ? ? ? vertical(0);
  21.  
  22. ? ? ? ? ? ? //移动端适配
  23. ? ? ? ? ? ? var doc = win.document;
  24. ? ? ? ? ? ? var docEl = doc.documentElement;
  25. ? ? ? ? ? ? var tid;
  26. ? ? ? ? ? ? function refreshRem() {
  27. ? ? ? ? ? ? ? ? var width = docEl.getBoundingClientRect().width
  28. ? ? ? ? ? ? ? ? if (width > 768) {?
  29. ? ? ? ? ? ? ? ? ? ? width = 768;
  30. ? ? ? ? ? ? ? ? }
  31. ? ? ? ? ? ? ? ? var rem = width / 7.5;
  32. ? ? ? ? ? ? ? ? docEl.style.fontSize = rem + 'px';
  33. ? ? ? ? ? ? ? ? docEl.style.fontSize = rem + 'px';
  34. ? ? ? ? ? ? ? ? docEl.style.fontSize = rem + 'px';
  35. ? ? ? ? ? ? }
  36. ? ? ? ? ? ? win.addEventListener('resize', function() {
  37. ? ? ? ? ? ? ? ? clearTimeout(tid);
  38. ? ? ? ? ? ? ? ? tid = setTimeout(refreshRem, 300);
  39. ? ? ? ? ? ? }, false);
  40. ? ? ? ? ? ? win.addEventListener('pageshow', function(e) {
  41. ? ? ? ? ? ? ? ? if (e.persisted) {
  42. ? ? ? ? ? ? ? ? ? ? clearTimeout(tid);
  43. ? ? ? ? ? ? ? ? ? ? tid = setTimeout(refreshRem, 300);
  44. ? ? ? ? ? ? ? ? }
  45. ? ? ? ? ? ? }, false);
  46. ? ? ? ? ? ? refreshRem();
  47. ? ? ? ? })(window);
  48. ? ? </script>
  49. </body>

css:

  1. body,html{
  2. ? ?width:100%;
  3. ? ? height:100%;
  4. ? ? position: relative;
  5. ? ? background: #232226;
  6. ? ? overflow-y: auto;
  7. ? ? overflow-x: hidden;
  8. }
  9. .topBox,.topBoxTxt{
  10. ? ? width:100%;
  11. ? ? height:auto;
  12. ? ? position: relative;
  13. }
  14. .topBoxTxt{
  15. ? ? text-align: center;
  16. ? ? height:auto;;
  17. ? ? color:#fff;
  18. ? ? font-size: 0.36rem;
  19. ? ? padding-top:55px;
  20. }
  21. .txtBox{
  22. ? ? width: 5.6rem;
  23. ? ? height: 5.2rem;
  24. ? ? margin:0 auto;
  25. ? ? overflow-y: scroll;
  26. }
  27. ? ?.txtBox>li{
  28. ? ? ? ? ? ? opacity: 0.5;
  29. ? ? ? ? ? ? height:0.74rem;
  30. }
  31. ? ?.txtBox>li:first-child{
  32. ? ? ? padding-top:60px;
  33. ? ?}
  34. .txtBox>li.hotColor{
  35. ? ? opacity: 1;
  36. }
  37. .txtBox_4{
  38. ? ? width:4.6rem;
  39. ? ? height: 7.5rem;
  40. ? ? overflow-x: auto;
  41. ? ? white-space: nowrap;
  42. ? ? display: block;
  43. }
  44. .txtBox_4>li{
  45. ? ? writing-mode:tb-rl;
  46. ? ? writing-mode:vertical-rl;
  47. ? ? -webkit-writing-mode: vertical-rl;
  48. ? ? height: 0;
  49. ? ? line-height: 0.75rem;
  50. ? ? word-wrap:break-word;
  51. }
  52. .txtBox_4>li{
  53. ? ? width:0.4rem;
  54. ? ? text-align: center;
  55. ? ? margin:0 0.1rem;
  56. ? ? display: inline-table;
  57. ? ? position: relative;
  58. }

index.js:

  1. var freq=10;//滚动频率
  2. var fraction=9/10;// 水平文字高亮显示行在歌词显示区域中的固定位置百分比
  3. var frac=3/10;// 垂直文字高亮显示行在歌词显示区域中的固定位置百分比 ??
  4. var timer=true;//定时器
  5. var num=-1;//当前行下标
  6. var time;//滚动距离
  7. var eul = document.getElementById("txtBox");
  8. var lis=[
  9. ? ? {"offset":3000, "text":"我总是轻描淡写告诉你我的愿望"},
  10. ? ? {"offset":6000, "text":"也给你千言万语都说不尽的目光"},
  11. ? ? {"offset":9000, "text":"这世界总有人在忙忙碌碌寻宝藏"},
  12. ? ? {"offset":12000, "text":"却误了浮世骄阳也错过人间万象"},
  13. ? ? {"offset":15000, "text":"古城里长桥上"},
  14. ? ? {"offset":18000, "text":"人如海车成行"},
  15. ? ? {"offset":21000, "text":"你笑得像光芒"},
  16. ? ? {"offset":24000, "text":"蓦然把我照亮"},
  17. ? ? {"offset":27000, "text":"风轻扬夏未央"},
  18. ? ? {"offset":30000, "text":"林荫路单车响"},
  19. ? ? {"offset":33000, "text":"原来所谓爱情"},
  20. ? ? {"offset":36000, "text":"是这模样"},
  21. ? ? {"offset":39000, "text":""}
  22. ]
  23. var count=lis.length%7+5;
  24.  
  25. //文字水平排列滚动
  26. function ?hor(){
  27. ? ? for (var i = 0; i <lis.length; i++) {
  28. ? ? ? ? var eli = document.createElement("li");
  29. ? ? ? ? eli.innerText = lis[i].text;
  30. ? ? ? ? eul.appendChild(eli);
  31. ? ? }
  32. ? ? ?for(var j=0;j<count;j++){
  33. ? ? ? ? var eli = document.createElement("li");
  34. ? ? ? ? eli.innerText ="";
  35. ? ? ? ? eul.appendChild(eli);
  36. ? ? }
  37. }
  38.  
  39. function horizontal(lineno){
  40. ? ? common(lineno,horizontal);
  41.  
  42. ? ? var scrollTop;
  43. ? ? var ep = eul.children[lineno];
  44. ? ? if(30<ep.offsetTop<eul.clientHeight*fraction){
  45. ? ? ? ? scrollTop=ep.offsetTop;
  46. ? ? }else if(ep.offsetTop>(eul.scrollHeight-eul.clientHeight*(1-fraction))){
  47. ? ? ? ? scrollTop=eul.scrollHeight-eul.clientHeight;
  48. ? ? }else{
  49. ? ? ? ? scrollTop=ep.offsetTop=eul.clientHeight*fraction;
  50. ? ? }
  51.  
  52. ? ? // 如用户拖动滚动条导致当前显示行超出显示区域范围,下一行直接定位到当前显示行
  53. ? ? if (eul.scrollTop > (scrollTop + eul.clientHeight*fraction)|| (eul.scrollTop + eul.clientHeight*fraction) < scrollTop){
  54. ? ? ? ? eul.scrollTop = scrollTop;
  55. ? ? }else {?
  56. ? ? ? ? var step = Math.ceil(Math.abs(eul.scrollTop - scrollTop)/(time/freq));
  57. ? ? ? ? scrollT(eul.scrollTop, scrollTop, step);
  58. ? ? }
  59. }
  60.  
  61. function scrollT(crt, dst, step){
  62. ? ? if(Math.abs(crt - dst) < step){
  63. ? ? ? ? return;
  64. ? ? }
  65. ? ? ?if(crt < dst){
  66. ? ? ? ? eul.scrollTop += step;
  67. ? ? ? ? crt += step;
  68. ? ? }
  69. ? ? else {
  70. ? ? ? ? eul.scrollTop -= step;
  71. ? ? ? ? crt -= step;
  72. ? ? }
  73. ? ? setTimeout(scrollT.bind(this, crt, dst, step), freq);
  74. };
  75.  
  76.  
  77. //文字垂直排列滚动
  78. function ver(){
  79. ? ? console.log(eul)
  80. ? ? for (var i = 0; i <lis.length; i++) {
  81. ? ? ? ? var eli = document.createElement("li");
  82. ? ? ? ? eli.innerHTML = lis[i].text;
  83. ? ? ? ? eul.appendChild(eli);
  84. ? ? ? ? if(eli.innerText.length<15){
  85. ? ? ? ? ? ? eli.style.marginBottom=(15-eli.innerText.length)+"em";
  86. ? ? ? ? }
  87. ? ? }
  88. ? ? for(var j=0;j<count;j++){
  89. ? ? ? ? var eli = document.createElement("li");
  90. ? ? ? ? eli.innerText ="";
  91. ? ? ? ? eul.appendChild(eli);
  92. ? ? }
  93. }
  94.  
  95. function vertical(lineno){
  96. ? ? common(lineno,vertical);
  97.  
  98. ? ? var scrollLeft;
  99. ? ? var ep = eul.children[lineno];
  100. ? ? if (ep.offsetLeft < eul.clientWidth*frac){
  101. ? ? ? ? scrollLeft = 0;
  102. ? ? } else if (ep.offsetLeft > (eul.scrollWidth - eul.clientWidth*(1-frac))){
  103. ? ? ? ? scrollLeft = eul.scrollWidth - eul.clientWidth;
  104. ? ? } else {
  105. ? ? ? ? scrollLeft = ep.offsetLeft - eul.clientWidth*frac;
  106. ? ? }
  107.  
  108. ? ? // 如用户拖动滚动条导致当前显示行超出显示区域范围,下一行直接定位到当前显示行
  109. ? ? if (eul.scrollLeft > (scrollLeft + eul.clientWidth*frac)|| (eul.scrollLeft + eul.clientWidth*frac) < scrollLeft){
  110. ? ? ? ? eul.scrollLeft = scrollLeft;
  111. ? ? } else {?
  112. ? ? ? ? var step = Math.ceil(Math.abs(eul.scrollLeft - scrollLeft)/(time/freq));
  113. ? ? ? ? scrollL(eul.scrollLeft, scrollLeft, step);
  114. ? ? }
  115. }
  116.  
  117. function scrollL(crt, dst, step){
  118. ? ? if(Math.abs(crt - dst) < step){
  119. ? ? ? ? return;
  120. ? ? }
  121. ? ? if(crt < dst){
  122. ? ? ? ? eul.scrollLeft += step;
  123. ? ? ? ? crt += step;
  124. ? ? } else {
  125. ? ? ? ? eul.scrollLeft -= step;
  126. ? ? ? ? crt -= step;
  127. ? ? }
  128. ? ? setTimeout(scrollL.bind(this, crt, dst, step), freq);
  129. }
  130.  
  131. function common(lineno,fn){
  132. ? ? if (lineno ==0) {
  133. ? ? ? ? time = lis[lineno].offset;?
  134. ? ? } else {
  135. ? ? ? ? time = lis[lineno].offset - lis[lineno-1].offset;
  136. ? ? }
  137. ? ? timer = setTimeout(fn.bind(this, lineno+1), time);
  138. ? ? num=lineno;
  139.  
  140. ? ? //若滚动到最后一行,则从头开始,并把每一行文字均取消高亮
  141. ? ? if(lineno==lis.length-1){
  142. ? ? ? ? for(var i=0;i<(eul.children).length-1;i++){
  143. ? ? ? ? ? ? eul.children[i].setAttribute("class", "");
  144. ? ? ? ? }
  145. ? ? ? ? lineno=0;
  146. ? ? ? ? timer = setTimeout(fn.bind(this, lineno), time);
  147. ? ? }
  148. ? ? if (lineno > 0) {
  149. ? ? ? ? eul.children[lineno-1].setAttribute("class", "");
  150. ? ? }
  151. ? ? var ep = eul.children[lineno];
  152. ? ? ep.setAttribute("class", "hotColor");
  153. }

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号