• 前端:弹幕标签用法详细介绍(跑马灯)


    弹幕标签

    1,注意弹幕标签marquee,现在一些浏览器是不支持的
    2,弹幕标签也叫跑马灯

    marquee格式及其含有的属性

    1.基本格式

    如下:

    
    
    • 1

    2.一些属性

    1,direction属性:表示的是弹幕行走的方向,如下面实现向左行走

    这波操作6
    
    • 1

    其中direction还可以设置值为up right down,可以自己修改演示。

    添加width和height属性可以设置滚动的宽度和高度:如下设置高度为300px

    我改单方向向上循环滚动       
    
    • 1

    2,behavior属性:
    behavior属性可以取多个值,如:alternate scroll slide 等
    若取值为alternate则表示弹幕从屏幕一侧跑到屏幕另外一侧时马上再向相反方向弹回去。
    如下:

    我从屏幕一侧跑到另一侧
    
    • 1

    若取值为scroll表示弹幕从一侧跑到另一侧后又重新从一侧跑到另外一侧,如下:

    我单方向循环滚动
    
    • 1

    若取值为slide表示只向单方向行走一次,走到另外一侧时就停下,如下:

    我单方向走一次了 
    
    • 1

    3,scrollamount属性
    表示运动的速度快慢,默认取值为6,设置的越大则跑的越快,如下:

    我速度快 
    
    • 1

    4,scrolldelay属性
    表示停顿的时间,单位为毫秒如下:

    速度被抑制了
    
    • 1

    5,bgcolor
    表示滚动区域的颜色,如下:

     这波操作6  
    
    • 1

    运行如图:
    在这里插入图片描述
    6,hspace属性
    表示的是走到离边界还有多远的距离就回到开始重新走动。
    如下:

    离边界还有100px就重新循环 
    
    • 1

    其中的值的单位是px,运行后可以发现弹幕走到离左边边界还有一段距离时就重新滚动。
    7,onMouseOut="this.start()"属性
    表示鼠标放到这里时则弹幕重新从开始地方行走。如下

    点击这里 
    
    • 1

    可以看见,鼠标移动到弹幕位置再拿开时,弹幕重新开始。
    8,onMouseOut="this.start()"属性
    表示的是鼠标放在弹幕位置并且拿开时,弹幕保持停止状态,不再走。如下:

    点击这里 
    
    • 1

    运行鼠标放在弹幕处可以看到弹幕不再动。
    9,loop属性
    loop属性表示的是弹幕循环的次数,默认是无限次。如下:

    循环出现2次 
    
    • 1

    运行后可以看到弹幕滚动2次后就再也没有出现了。

    综合练习效果:

    代码:

     这波操作6  
    我来回滚动 
    我单方向循环滚动
    我改单方向向上循环滚动       
    我只滚动一次 
    我改向上只滚动一次了 
    我速度很快. 
    离边界还有100px就重新循环 
    离边界还有100px就重新循环 
    我小步前进。 
    鼠标移动到这里重新开始弹幕 
    鼠标移动到这里弹幕停止 
    循环出现2次 
    我大步前进。
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    运行效果如下:
    在这里插入图片描述

    喜欢的话点个赞吧,谢谢

    先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在。深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小。自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担。添加下方名片,即可获取全套学习资料哦

  • 相关阅读:
    analyzer [ik_max_word] not found for field [title]
    QQmlApplicationEngine
    轻量封装WebGPU渲染系统示例<37>- 多个局部点光源应用于非金属材质形成的效果(源码)
    容联七陌助力鱼跃医疗升级智能联络中心,让客户服务更“鱼跃”
    vue网页浏览器刷新404问题解决
    HCIP知识点
    641.设计双向循环队列
    vue环境中bpmn工具实现翻译汉化
    【Redis优化——如何优雅的设计key,优化BigKey,Pipeline批处理Key】
    教小白30分钟实现分库分表
  • 原文地址:https://blog.csdn.net/m0_59092234/article/details/126080995