js实现文字滚动的效果
本文实例为大家分享了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中不兼容)
【js实现文字滚动的效果】默认值: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:
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; //文字水平排列滚动functionhor(){for (var i = 0; i(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 (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实现电子时钟效果
- JavaScript|JavaScript canvas实现字符雨效果
- JavaScript实现简单的倒计时效果
- JavaScript实现带粒子效果的进度条
- JavaScript实现字符雨效果
- JavaScript实现瀑布动画
- Android实现简单购物车
- Flask框架实现注册加密功能详解Flask企业课学习
- Java中Socket 实现最简单的客户端与服务端通信
- JavaScript实现表单验证示例