js文字滚动效果,html如何实现文字滚动

　　操作环境：windows7系统，javascript1.8.5版本1.8.5，戴尔G3电脑。

　　怎么用javascript实现文字滚动？

　　js实现文字滚动效果

　　在过去，边肖已经向您介绍了一些常用的js动画效果。在这里，我想介绍一个可能不常用的动画效果。动画效果和文字有关，虽然不常用，但几乎每个人都看过。

　　相信大家都是用酷狗音乐或者网易云音乐来搜索和听音乐的。时间久了，他们一定会在歌词页面看到歌词滚动的效果。这个动画效果和原来一样，但是和这些音乐歌词有些不同，增加了文字垂直排列和滚动的效果。

　　在介绍之前，我们先来学习一些单词垂直排列的方式：

　　写模式属性

　　1.价值：

　　(1)写入模式：水平-tb 垂直-rl 垂直-lr lr-tb tb-rl

　　(2)兼容书写：-WebKit-writing-mode:horizontal-TB vertical-RL vertical-LR LR-TB t b-RL

　　(注：IE中lr-tb和tb-rl不兼容)

　　默认值：正常

　　适用于除表-行-组、表-列-组、表-行和表-列之外的所有元素。

　　继承：是

　　动画：没有

　　计算值：特定值

　　2.写作模式的价值介绍

　　(1)水平-tb:水平方向自上而下书写。即左-右-上-下(类似IE私值lr-tb)

　　(2)垂直-rl:垂直方向从右向左的书写风格。即上-下-右-左(类似于IE私值tb-rl)

　　(3)垂直-lr:垂直方向从左到右的书写风格。也就是从上到下从左到右

　　(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

　　/部分

　　脚本类型= text/JavaScript src= index . js /script

　　脚本

　　(函数(win){

　　//文本水平排列并滚动。

　　//hor()；

　　//水平(0)；

　　//文本垂直排列并滚动

　　$(.txt box’)。addClass( txt box _ 4 )；

　　ver()；

　　垂直(0)；//移动终端适配

　　var doc=win.documentvar docEl=doc.documentElementvar tid函数refreshRem() {

　　var width=docel . getboundingclientrect()。宽度if(宽度768) {

　　宽度=768；

　　} var rem=宽度/7.5；

　　docel . style . font size=rem px ；

　　}

　　win.addEventListener(resize ，function() {

　　clear time out(tid)；

　　tid=setTimeout(refreshRem，300)；

　　}，假)；

　　win.addEventListener(pageshow ，函数(e) {

　　如果(e.persisted) {

　　clear time out(tid)；

　　tid=setTimeout(refreshRem，300)；

　　}

　　}，假)；

　　refresh rem()；

　　})(窗口)；/script/bodycss:

　　正文，html{宽度：100%；身高：100%；位置：相对；背景：# 232226；溢出-y:自动；溢出-x:隐藏；}.机顶盒，topBoxTxt{宽度：100%；高度：自动；位置：相对；}.topbox txt { text-align:center；高度：自动；

　　颜色：# fff字体大小：0.36雷姆；填充顶部：55px}.txt box { width:5.6 rem；身高：5.2雷姆；边距：0自动；溢出-y:滚动；}。txtBoxli{不透明度：0.5;身高：0.74雷姆；}。txtBoxli:第一个孩子{ padding-top:60px；} .txtboxli。热色{不透明度：1；}.txt box _ 4 { width:4.6 rem；身高：7.5雷姆；溢出-x:自动；空白：nowrap显示：块；}.txtBox_4li{写入模式：t b-rl；书写模式：垂直-rl；-WebKit-writing-mode:vertical-rl；高度：0;行高：0.75雷姆；自动换行：断字；}.txt box _ 4li { width:0.4 rem；文本对齐：居中；保证金：0 0.1元；显示：内嵌表格；位置：相对；}index.js:

　　var freq=10//滚动频率定义变量分数=9/10;//水平文字高亮显示行在歌词显示区域中的固定位置百分比var frac=3/10；//垂直文字高亮显示行在歌词显示区域中的固定位置百分比var timer=true//定时器var num=-1；//当前行下标定义变量时间；//滚动距离var eul=文档。getelementbyid(“txt box”)；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 :林荫路单车响},

　　{ 偏移量:33000,文本:原来所谓爱情},

　　{offset:36000， text :是这模样},

　　{offset:39000， text:}

　　]var count=lis。长度% 7% 5；//文字水平排列滚动函数hor(){

　　for(var I=0；长度；I){ var Eli=文档。createelement(“Li”)；

　　eli.innerText=lis[i].文本；

　　eul。appendchild(伊莱)；

　　} for(var j=0；jcountj){ var Eli=document。createelement(“Li”)；

　　伊莱。innertext=

　　eul。appendchild(伊莱)；

　　}

　　}水平功能（行号){

　　普通（线号，水平);var scrollTopvar EP=eul。儿童[行号]；如果(30ep。offsettopeul。客户身高*分数){

　　scrollTop=ep.offsetTop

　　} else if(EP。offsettop(eul。滚动高度。客户身高*(1-小数))){

　　滚动顶部=eul。滚动高度。客户身高；

　　}否则{

　　滚动顶部=EP。offsettop=eul。客户身高*分数；

　　} //如用户拖动滚动条导致当前显示行超出显示区域范围，下一行直接定位到当前显示行

　　如果(eul。滚动顶部(滚动顶部eul。客户身高*分数) (eul。滚动顶部eul。客户端高度*分数)滚动顶部){

　　eul。滚动顶部=滚动顶部；

　　}否则{

　　var step=数学。ceil(数学。ABS(eul。scroll top-scroll top)/(time/freq))；

　　scrollT(eul.scrollTop，scrollTop，step)；

　　}

　　}函数scrollT(crt，dst，step){

　　如果(数学。ABS(CRT-dst)步骤){ return

　　} if(crt dst){

　　eul.scrollTop=step

　　crt=步长；

　　}否则{

　　eul。向上滚动-=一步；

　　CRT-=step；

　　}

　　setTimeout(scrollT.bind(this，crt，dst，step)，freq)；

　　};//文字垂直排列滚动函数版本(){

　　控制台。(var I=0；长度；I){ var Eli=文档。createelement(“Li”)；

　　eli.innerHTML=lis[i].文本；

　　eul。appendchild(伊莱)；if(eli.innerText.length15){

　　伊莱。风格。margin bottom=(15-Eli。内部文本。长度)" em "；

　　}

　　} for(var j=0；jcountj){ var Eli=document。createelement(“Li”)；

　　伊莱。innertext=

　　eul。appendchild(伊莱)；

　　}

　　}垂直功能（行号){

　　普通（线号，垂直);var scrollLeftvar EP=eul。儿童[行号]；如果(EP。偏移左eul。客户端宽度* frac){

　　向左滚动=0；

　　} else if(EP。向左偏移(eul。滚动宽度。客户端宽度*(1-frac))){

　　向左滚动=eul。滚动宽度。客户端宽度；

　　}否则{

　　向左滚动=EP。左偏移。客户端宽度* frac

　　} //如用户拖动滚动条导致当前显示行超出显示区域范围，下一行直接定位到当前显示行

　　如果(eul。向左滚动(向左滚动。客户端宽度* frac) (eul。向左滚动eul。客户端宽度* frac)向左滚动){

　　eul。向左滚动=向左滚动；

　　}否则{

　　var step=数学。ceil(数学。ABS(eul。向左滚动-向左滚动)/(时间/频率))；

　　滚动(eul。scrollLeft，向左滚动，步进)；

　　}

　　}函数滚动(CRT、dst、step){

　　如果(数学。ABS(CRT-dst)步骤){ return

　　} if(crt dst){

　　eul.scrollLeft=step

　　crt=步长；

　　}否则{

　　eul。向左滚动-=一步；

　　CRT-=step；

　　}

　　setTimeout(滚动。bind(this，crt，dst，step)，freq)；

　　}通用功能（行号，fn){

　　if (lineno==0) {

　　时间=lis[行号]。偏移；

　　}否则{

　　时间=lis[行号]。偏置-lis[线号-1]。偏移；

　　}

　　timer=setTimeout(fn.bind(this，lineno 1)，time)；

　　num=lineno//若滚动到最后一行，则从头开始，并把每一行文字均取消高亮

　　if(行号==lis。length-1){ for(var I=0；我(尤指儿童).长度-1;i ){

　　儿童[我]。setAttribute(class ， )；

　　}

　　行号=0；

　　timer=setTimeout(fn.bind(this，lineno)，time)；

　　}如果(第0行){

　　eul.children[lineno-1].setAttribute(class ， )；

　　} var EP=eul。儿童[行号]；

　　ep.setAttribute(class ， hot color )；

　　}推荐学习：《javascript基础教程》

　　以上就是怎么用爪哇岛描述语言实现文字滚动的详细内容，更多请关注我们其它相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读