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

news2025/1/17 13:53:13

弹幕标签

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

marquee格式及其含有的属性

1.基本格式

如下:

<marquee></marquee>

2.一些属性

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

<marquee direction="left">这波操作6</marquee>

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

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

<marquee behavior="scroll" direction="up" height="300">我改单方向向上循环滚动</marquee>       

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

<marquee behavior="alternate">我从屏幕一侧跑到另一侧</marquee>

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

<marquee behavior="scroll">我单方向循环滚动</marquee>

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

<marquee behavior="slide">我单方向走一次了</marquee> 

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

<marquee scrollamount="30">我速度快</marquee> 

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

<marquee scrolldelay="100" scrollamount="100">速度被抑制了</marquee>

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

 <marquee direction="left" bgcolor="red">这波操作6</marquee>  

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

<marquee scrollamount="30" hspace="100">离边界还有100px就重新循环</marquee> 

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

<marquee onMouseOut="this.start()">点击这里</marquee> 

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

<marquee onMouseOut="this.stop()">点击这里</marquee> 

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

<marquee loop="2">循环出现2次</marquee> 

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

综合练习效果:

代码:

 <marquee direction="left" bgcolor="red">这波操作6</marquee>  
<marquee behavior="alternate">我来回滚动</marquee> 
<marquee behavior="scroll">我单方向循环滚动</marquee>
<marquee behavior="scroll" direction="up" height="300">我改单方向向上循环滚动</marquee>       
<marquee behavior="slide">我只滚动一次</marquee> 
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee> 
<marquee scrollamount="100">我速度很快.</marquee> 
<marquee scrollamount="30" hspace="100">离边界还有100px就重新循环</marquee> 
<marquee scrollamount="30" vspace="100">离边界还有100px就重新循环</marquee> 
<marquee scrolldelay="30">我小步前进。</marquee> 
<marquee onMouseOut="this.start()">鼠标移动到这里重新开始弹幕</marquee> 
<marquee onMouseOut="this.stop()">鼠标移动到这里弹幕停止</marquee> 
<marquee loop="2" scrollamount="30">循环出现2次</marquee> 
<marquee scrolldelay="100" scrollamount="100">我大步前进。</marquee>

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

喜欢的话点个赞吧,谢谢

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409294.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

39.JavaScript中Promise的基本概念、使用方法,回调地狱规避、链式编程

《JavaScript再出发》系列文章阅读《仙宗》发布招仙贴&#xff0c;广招天下道友 文章目录JavaScript中Promise的基本概念、使用方法&#xff0c;以及回调地狱规避一、前言二、Promise基本概念2.1 异步工作的封装2.2 Promise执行结果获取thencatchfinally三、使用Promise解决回调…

qiankun微应用之间、主微应用之间相互跳转方式总结与实践

一、子应用互相访问 1、背景 &#xff08;1&#xff09;未来可能需要做不同子应用菜单的合并&#xff0c;如在bi应用下的侧边栏或者别的地方&#xff0c;需要跳转到数据治理的数仓主题里&#xff0c;或者涉及到子应用值改变&#xff0c;其他应用也需要使用&#xff1b; &…

【JWT鉴权】如何来写一个token令牌认证登录?

目录一. &#x1f981; 话题引入1.2 什么是JWT&#xff1f;二. &#x1f981; 技术体现2.1 引入依赖2.2 编写JWT工具类2.3 编写登录方法2.4 编写JWT拦截器验证令牌2.5 编写要配置拦截的接口三. &#x1f981; 话题终结一. &#x1f981; 话题引入 在做项目过程中&#xff0c;我…

vue-element-ui前后端交互实现分页查询

大体思路&#xff1a; ①添加element-ui分页组件 ②在data里定义几个参数用来存放当前页&#xff0c;每页条数&#xff0c;条目总数以及存放后端分页查询的结果 ③后端使用分页查询&#xff0c;controller层接收当前页以及每页条数的参数 ④前端编写方法发送请求到controll…

用jsp实现简单登入注册界面功能(css美化)(软件idea)

思路&#xff1a;创建登入界面&#xff08;login&#xff09;&#xff0c;再创建登入成功与登入失败界面&#xff08;loginsuccess与loginfail&#xff09;&#xff0c;再创建注册成功界面&#xff08;registersuccess&#xff09;与注册界面&#xff08;register&#xff09;以…

用HTML实现简易版计算器

计算器功能&#xff1a;实现了加减乘除、清零、回退、四则运算、幂运算、根式运算等等。 运行结果如下&#xff1a; 引入的图片&#xff1a;back.png HTML部分&#xff1a;用table表格添加计算器的按键&#xff0c;给每个按键设置一个相应的单击事件&#xff0c;点击一个按键后…

RuoYi-Vue——图标使用

使用若依的小伙伴们&#xff0c;是否有遇到找图标的烦恼。若依框架里图标分两种&#xff0c; 1.用在表格中的图标&#xff1a; 2.用在菜单及个人信息的图标&#xff1a; 下面我就针对这两种图标给大家总结一下。 1.表格图标&#xff08;ElementUI图标Icon&#xff09; 若依的表…

【JavaScript】五个常用功能/案例:判断特定结尾字符串 | 获取指定字符串 | 颜色字符串转换 | 字符串转驼峰格式 | 简易购物车

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 &#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&#xff09; &#x1f5a5;️ TypeScript知识总…

layui数据表格的使用(前端和后端)

数据表格&#xff08;纯前端&#xff09; 快速使用 首先需要引入layui的css和js <link rel"stylesheet" href"../static/layui/css/layui.css"> <script src"../static/layui/layui.js" charset"utf-8"></script>…

如何搭建vue框架-1

提示&#xff1a;前端新人&#xff0c;初来乍到&#xff0c;若文章写的不好大家多包涵。 文章目录前言一、vue是什么&#xff1f;二、ElementUI是什么&#xff1f;三、搭建前的准备四、安装步骤1.安装webpack2.安装vue-cli3.通过vue-cli构建项目4.启动项目5.其他总结前言 基于…

element-ui表格编辑

前言&#xff1a; 准备&#xff1a; element-uivue3vscode 实现步骤&#xff1a; 数据标定打开激活编辑保存 1. 设定需要编辑的表格单元格是否编辑标识 在请求后台表格数据时进行一个二次包装&#xff0c;如果后端已经处理则不需要在进行包装&#xff08;此处包装是否编辑…

手撕前端面试题【javascript~模板字符串、类继承、参数解析器、生成页码等】

前端的那些基本标签&#x1f353;&#x1f353;模板字符串&#x1f353;&#x1f353;类继承&#x1f353;&#x1f353;参数解析器&#x1f353;&#x1f353;生成页码&#x1f353;&#x1f353;js中哪些操作会造成内存泄漏?html页面的骨架&#xff0c;相当于人的骨头&#…

react router6.x官方DEMO

Tutorial v6.4.2 | React Router 初始化项目 import React from "react"; import ReactDOM from "react-dom/client"; import {createBrowserRouter,RouterProvider,Route, } from "react-router-dom"; import "./index.css";const …

用CSS设置颜色、背景和图像效果

&#x1f4dc;个人简介 ⭐️个人主页&#xff1a;微风洋洋&#x1f64b;‍♂️ &#x1f351;博客领域&#xff1a;编程基础&#x1f4a1;,后端&#x1f4a1;,大数据,信息安全 &#x1f345;写作风格&#xff1a;干货,干货,还是tmd的干货 &#x1f338;精选专栏&#xff1a;【J…

js数组常用方法(19种)|你会的到底有多少呢?

一、改变原数组的方法 1.push&#xff08;&#xff09; 末尾添加数据 语法: 数组名.push(数据) 作用: 就是往数组末尾添加数据 返回值: 就是这个数组的长度 //push var arr [10, 20, 30, 40] res arr.push(20) console.log(arr);//[10,20,30,40,20] console.log(res);//52. …

【Cesium】使用TLE轨道两行数计算轨道信息,并生成CZML格式文件

TLE为轨道两行数&#xff0c;简单的说是用两行数字表示轨道的相关信息&#xff0c;本文即用轨道两行数来计算任一时刻卫星的位置信息和速度信息&#xff0c;并生成CZML文件能够读取的格式 1、satellite.js库简介 简而言之&#xff0c;satellite.js库可以根据TLE轨道两行数&…

vue 项目适配笔记本1920*1080 125%缩放

前言 在台式机上开发pc端项目时&#xff0c;由于是1920*1080的分辨路和100缩放&#xff0c;看起来是没有问题。在笔记本上有问题 因为现在很多14寸的笔记本&#xff0c;出厂默认就是125%或150%的显示。导致很多时候我们的项目&#xff0c;自己开发的时候都是按照100%比例来开发…

Vue使用Serial连接串口

本来只是随手记录一下&#xff0c;发现看的人多了&#xff0c;想着还是修复一下bug吧&#xff0c;供各位看官指正 2022-10-24本次更新: 1、修复在不支持Serial的情况下&#xff0c;控制台报错 2022-09-19本次更新: 1、修复了传输数据接收分隔的情况(增加数据缓存) 2、修复串口连…

【中兴】web训练营~一文带你走进前端 | 百图制作

&#x1f4e2;作者简介&#xff1a;物联网领域创作者&#xff0c;&#x1f3c5;阿里云专家博主&#x1f3c5; &#x1f3c5;华为云享专家&#x1f3c5; ✒️个人主页&#xff1a;Choice~ &#x1f310;格言&#xff1a;可正因为难&#xff0c;才有价值&#xff01;&#x1f536…

Linux 使用Nginx部署web(vue、react)项目

前言 本文基于&#xff1a;操作系统 CentOS 7.6 使用的工具&#xff1a;Xshell7、Xftp7 1.安装所需依赖 安装gcc yum -y install gcc安装pcre、pcre-devel yum -y install pcre pcre-devel安装zlib、zlib-devel yum install -y zlib zlib-devel安装openssl、openssl-dev…