当前位置：首页 > news >正文

DIV内容滚动，文字符滚动标签marquee兼容稳定不卡

news 2026/5/17 17:58:45

marquee(文字滚动)标签
marquee简介
<marquee>标签,是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。
<marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它们都是可选的。

marquee属性
behavior属性
behavior属性的参数值为alternate、scroll、slide中的一个，分别表示文字来回滚动、单方向循环滚动、只滚动一次.
注意
如果在<marquee>标签中同时出现了direction和behavior属性，那么scroll和slide的滚动方向将依照direction属性中参数的设置。

bgcolor属性
文字滚动范围的背景颜色，参数值是16进制(形式:#AABBCC或#AA5566等)或预定义的颜色名字(如red、yellow、blue等)。

direction属性
文字滚动的方向，属性的参数值有down、left、right、up共四个单一可选值，分别代表滚动方向向下、向左、向右、向上。

width和height属性
width和height属性的作用决定滚动文字在页面中的矩形范围大小。
width属性用以规定矩形的宽度，height属性规定矩形的高度。
这两个属性的参数值可以是数字或者百分数，数字表示矩形所占的(宽或高)像素点数，百分数表示矩形所占浏览器窗口的(宽或高)百分比。

hspace和vspace属性
这两个属性决定滚动矩形区域距周围的空白区域.

loop属性
loop属性决定滚动文字的滚动次数，缺省是无限循环。参数值可以是任意的正整数，如果设置参数值为-1或infinite时将无限循环。

scrollamount和scrolldelay属性
这两个属性决定文字滚动的速度(scrollamount)和延时(scrolldelay)，参数值都是正整数。
align属性
这个属性决定滚动文字位于距形内边框的上下左右位置。
注意
您也可以将<marquee>和</marquee>之间的内容替换为图像或其它对象等功能。

各个属性参数
direction 表示滚动的方向，值可以是left，right，up，down，默认为left
behavior 表示滚动的方式，值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)
loop 表示循环的次数，值是正整数，默认为无限循环
scrollamount 表示运动速度，值是正整数，默认为6
scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒
align 表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
bgcolor 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
height、width 表示运动区域的高度和宽度，值是正整数(单位是像素)或百分数，默认width=100% height为标签内元素的高度。
hspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
οnmοuseοver=this.stop() οnmοuseοut=this.start() 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。
综合实例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>marquee</title>
</head><body><marquee direction="up">我向上滚动</marquee><hr><marquee direction="down">我向下滚动</marquee><hr><marquee direction="left">我向左滚动</marquee><hr><marquee direction="right">我向右滚动</marquee><hr><marquee scrollamount="10">我速度很慢</marquee><hr><marquee scrollamount="100">我速度很快</marquee><hr><marquee scrolldelay="30">我小步前进。</marquee><hr><marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee><hr><marquee loop="1">我滚动一次</marquee><hr><marquee loop="2">我滚动两次</marquee><hr><marquee loop="infinite">我无限循环滚动</marquee><hr><marquee behavior="alternate">我来回滚动</marquee><hr><marquee behavior="scroll">我单方向循环滚动</marquee><hr><marquee behavior="scroll" direction="up" height="30">我单方向向上循环滚动</marquee><hr><marquee behavior="slide">我只滚动一次</marquee><hr><marquee behavior="slide" direction="up">我向上只滚动一次</marquee><hr><marquee behavior=="slide" direction="left" bgcolor="red">我的背景色是红色的</marquee><hr><marquee width="600" height="50" bgcolor="red">我宽300像素，高30像素。</marquee><hr><marquee width="300" height="30" vspace="10" hspace="10" bgcolor="red">我矩形边缘水平和垂直距周围各10像素。</marquee><hr><marquee width="300" height="30" vspace="50" hspace="50" bgcolor="red">我矩形边缘水平和垂直距周围各50像素。</marquee><hr><marquee align="absbottom">绝对底部对齐</marquee><hr><marquee align="absmiddle">绝对中央对齐</marquee><hr><marquee align="baseline">底线对齐</marquee><hr><marquee align="bottom">底部对齐（默认）</marquee><hr><marquee align="left">左对齐</marquee><hr><marquee align="middle"> 中间对齐</marquee><hr><marquee align="right">右对齐</marquee><hr><marquee align="texttop">顶线对齐</marquee><hr><marquee align="top">顶部对齐</marquee>
</body></html>

DIV内容滚动，文字符滚动标签marquee兼容稳定不卡

marquee(文字滚动)标签 marquee简介 <marquee>标签,是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。 <marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scr…...

编程日记 2023/5/12 21:04:46

SpringBoot_第五章(Web和原理分析）

目录 1：静态资源 1.1：静态资源访问 1.2：静态资源源码解析-到WebMvcAutoConfiguration 2：Rest请求绑定（设置put和delete） 2.1：代码实例 2.2：源码分析到-WebMvcAutoConfiguratio…...

编程日记 2023/5/12 21:04:40

4-2 Linux进程和内存概念

文章目录前言进程状态进程优先级内存模型进程内存关系前言进程是一个其中运行着一个或多个线程的地址空间和这些线程所需要的系统资源。一般来说，Linux系统会在进程之间共享程序代码和系统函数库，所以在任何时刻内存中都只有代码的一份拷贝。进程状态…...

编程日记 2023/5/12 21:04:37

【微信小程序】计算器案例

🏆今日学习目标：第二十一期——计算器案例 ✨个人主页：颜颜yan_的个人主页 ⏰预计时间：30分钟 🎉专栏系列：我的第一个微信小程序计算器前言实现效果实现步骤wxmlwxssjs数字按钮事件处理函数计算按钮处理事…...

编程日记 2023/5/12 21:04:32

408 计算机基础复试笔记 —— 更新中

计算机组成原理计算机系统概述问题一、冯诺依曼机基本思想存储程序：程序和数据都存储在同一个内存中，计算机可以根据指令集执行存储在内存中的程序。这使得程序具有高度灵活性和可重用性。指令流水线：将指令分成若干阶段，每…...

编程日记 2023/5/12 21:04:27

找出最大数-课后程序(Python程序开发案例教程-黑马程序员编著-第二章-课后作业)

实例6：找出最大数 “脑力大乱斗”休闲益智游戏的关卡中，有一个题目是找出最大数。本实例要求编写程序，实现从输入的任意三个数中找出最大数的功能。实例分析对于3个数比较大小，我们可以首先先对两个数的大小进行比较&#xff…...

编程日记 2023/5/12 21:04:23

Java——N叉树的层序遍历

题目链接 leetcode在线oj题——N叉树的层序遍历题目描述给定一个 N 叉树，返回其节点值的层序遍历。（即从左到右，逐层遍历）。树的序列化输入是用层序遍历，每组子节点都由 null 值分隔（参见示例&…...

编程日记 2023/5/12 21:04:18

【Kubernetes】第十八篇 - k8s 服务发现简介

一，前言上一篇，介绍了阿里云 ECS 服务器重启后的环境修复； 本篇，介绍 k8s 服务发现； 二，服务发现简介当 A服务依赖了 B服务，而 B服务的IP和端口未知（或相对不固定）&…...

编程日记 2023/5/12 21:04:14

Codeforces Round 856 (Div. 2) 最好ak的div2

最近几场的div2 E都是一个思路啊，代码大差不差的，感觉随便ak啊。 A. Prefix and Suffix Array 题意给你前n−1n-1n−1个字符串前缀和后n−1n-1n−1个字符串后缀，判断原字符串是否是回文串思路相同长度的判断是否是对称的即可。代码 B C…...

编程日记 2023/5/12 21:04:12

最新JVM技术: GraalVM，让你一文了解它的方方面面

1. 什么是GraalVM？ GraalVM是一种开源的虚拟机平台，由Oracle公司开发。它支持多种编程语言，包括Java、JavaScript、Python、Ruby、R、C++等，旨在提高应用程序的性能和扩展性。 GraalVM通过提供即时编译器（Just-in-Time Compiler，JIT）和Ahead-of-Time（AOT）编译器来提…...

编程日记 2023/5/12 21:04:09

MySQL索引失效的场景

1.like 以%开头，索引无效；当like前缀没有%，后缀有%时，索引有效。 2.数据库表数据量过小如果表的数据量非常小，则MySQL可能不会使用索引，因为它认为全表扫描的代价更小。 3.or语句前后没有同时使用索引 …...

编程日记 2023/5/12 21:04:05

Java - 对象的比较

一、问题提出前面讲了优先级队列，优先级队列在插入元素时有个要求：插入的元素不能是null或者元素之间必须要能够进行比较，为了简单起见，我们只是插入了Integer类型， 那优先级队列中能否插入自定义类型对象呢&#xf…...

编程日记 2023/5/12 21:04:01

[算法]选择排序

目录 1、选择排序的实现 2、例子 3、代码实现 4、时间复杂度和空间复杂度 5、选择排序的缺点——不稳定性 1、选择排序的实现选择排序就是每一轮选择最小的元素直接交换到左侧。这种排序的最大优势，就是省去了多余的元素交换。 2、例子原始数组和选择排序的…...

编程日记 2023/5/12 21:03:57

dp模型——状态机模型C++详解

状态机定义状态机顾名思义跟状态有关系，但到底有什么关系呢。在实际解决的时候，通常把状态想成节点，状态的转换想成有向边的有向图，我们来举个例子。相信大家都玩过类似枪战的游戏（没玩过的也听说过吧）&…...

编程日记 2023/5/12 21:03:55

1.4 条件概率与乘法公式

1.4.1 条件概率在实际问题中，除了直接考虑某事件 B 发生的概率P(B)外,有时还会碰到这样的问题，就是“在事件A 已经发生的条件下,事件B 发生的概率”。一般情况下,后概率与前一概率不同，为了区别,我们常把后者称为条件概率，记为P(B…...

编程日记 2023/5/12 21:03:50

VITA/PYTHON/LUPA families

Image Sensor Group Top to Bottom Portfolio in Industrial Imaging Machine Vision • Factory automation and inspection • Robotic vision • Biometrics High-End Surveillance • Aerial Surveillance • Intelligent Traffic Systems (ITS) • Mapping Medical and Sc…...

编程日记 2023/5/12 21:03:47

ChatGPT概述：从模型训练到基本应用的介绍

ChatGPT概述：从模型训练到基本应用的介绍目录本文是对ChatGPT的由来、训练过程以及实际落地场景的解释，主要内容包括如下三个方面： 1、ChatGPT是什么 2、ChatGPT的原理 3、ChatGPT的思考 4、ChatGPT的应用 ChatGPT是什么 ChatGPT可能是近…...

编程日记 2023/5/12 21:03:44

C语言实现扫雷【详细讲解+全部源码】

扫雷的实现1. 配置运行环境2. 扫雷游戏的初步实现2.1 建立扫雷分布模块2.2 创建名为board的二维数组并进行棋盘初始化2.3 打印棋盘3. 接下来该讨论的事情3.1 布置雷3.2 排查雷3.3 统计坐标周围有几个雷4. 完整扫雷游戏的实现4.1 game.h4.2 game.c4.3 扫雷.c1. 配置运行环境本游…...

编程日记 2023/5/13 2:27:34

Vue2.0开发之——购物车案例-Goods组件封装-商品名称和图片(46)

一概述循环渲染Goods组件为Goods组件封装title属性为Goods组件封装pic属性二循环渲染Goods组件 2.1 App.vue中导入Goods组件 import Goods from /components/Goods/Goods.vue2.2 App.vue中注册Goods组件 components: {Header,Goods}2.3 循环渲染每一个商品的信息 <…...

编程日记 2023/5/13 2:27:32

0201基础-组件-React

1 组件和模块 1.1 模块对外提供特定功能的js程序，一般就是一个js文件为什么拆分模块呢？随着业务逻辑增加，代码越来越多，越来越复杂。作用：复用js，简化js，提高js运行效率 1.2 模块化当应用…...

编程日记 2023/5/13 2:27:30

Kafka Connect集群部署踩坑实录：从单机到高可用的完整配置与监控方案

Kafka Connect生产级部署实战：高可用架构设计与监控体系构建当数据管道成为企业核心基础设施时，Kafka Connect的稳定性直接关系到业务连续性。去年某电商大促期间，因单点故障导致数据同步延迟6小时的教训仍历历在目——这正是我们需要深入探…...

编程新知 2026/5/17 9:55:13

Applite：告别命令行！macOS软件管理的图形化终极解决方案

Applite：告别命令行！macOS软件管理的图形化终极解决方案【免费下载链接】Applite User-friendly GUI macOS application for Homebrew Casks 项目地址: https://gitcode.com/gh_mirrors/ap/Applite 还在为Homebrew复杂的命令行操作而头疼吗&…...

编程新知 2026/5/17 9:29:04

Excel MCP Server终极指南：3步实现无界面Excel自动化处理

Excel MCP Server终极指南：3步实现无界面Excel自动化处理【免费下载链接】excel-mcp-server A Model Context Protocol server for Excel file manipulation 项目地址: https://gitcode.com/gh_mirrors/ex/excel-mcp-server 你是否厌倦了手动操作Excel的繁琐…...

编程新知 2026/5/17 9:22:49

抖音批量下载神器：5分钟学会免费高效下载视频、音乐和直播

抖音批量下载神器：5分钟学会免费高效下载视频、音乐和直播【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback s…...

编程新知 2026/5/17 8:50:05

3DS游戏格式转换实战指南：5步完成CCI到CIA的高效转换

3DS游戏格式转换实战指南：5步完成CCI到CIA的高效转换【免费下载链接】3dsconv Python script to convert Nintendo 3DS CCI (".cci", ".3ds") files to the CIA format 项目地址: https://gitcode.com/gh_mirrors/3d/3dsconv 作为一名3…...

编程新知 2026/5/17 8:41:23

基于RAG的智能知识库问答系统：从原理到部署实战

1. 项目概述：当AI大模型遇见知识库，一个开源的智能问答解决方案最近在折腾一个很有意思的开源项目，叫 zhimaAi/chatwiki 。光看名字，你大概能猜到它的核心： chat 代表对话， wiki 代表知识库。没错&a…...

编程新知 2026/5/17 6:10:27

开源容器镜像仓库cc-hub：从协议兼容到生产部署的完整实践指南

1. 项目概述：一个面向容器化应用的开源镜像仓库最近在整理团队内部的容器镜像管理方案时，我重新审视了开源镜像仓库这个领域。虽然市面上有 Harbor、Docker Registry 等成熟方案，但总有一些场景，比如轻量级内网部署、特定架构&…...

编程新知 2026/5/17 4:29:30

训练篇第9节：FlashAttention深度解析（一）——原理与CUDA实现

从 O(N) 到 O(N)，FlashAttention 用一记“IO感知”的巧劲，彻底解锁了Transformer处理超长序列的能力前言回溯整个训练篇，我们已经系统性地打怪升级：从显存优化的“三板斧”（梯度累积、激活重计算、碎片化管理），到分布式训练的并行策略（数据并行、模型并行、流水线并…...

编程新知 2026/5/17 3:08:51

基于视觉语言模型的智能体框架：让AI看懂界面并自动操作

1. 项目概述：当AI学会“看”与“想”最近在探索AI与视觉结合的领域时，我深度体验了landing-ai团队开源的vision-agent项目。这不仅仅是一个工具库，它更像是一个为大型语言模型（LLM）装上了“眼睛”和“手”的智能体框架…...

编程新知 2026/5/17 2:45:36

5分钟快速上手：PlantUML Editor - 告别拖拽，用代码绘制专业UML图表

5分钟快速上手：PlantUML Editor - 告别拖拽，用代码绘制专业UML图表【免费下载链接】plantuml-editor PlantUML online demo client 项目地址: https://gitcode.com/gh_mirrors/pl/plantuml-editor 还在为绘制复杂的UML图表而烦恼吗？你…...

编程新知 2026/5/17 2:23:50

相关文章：