开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 滚动 marquee

<marquee> 是 HTML 中的一个标签，用于创建滚动文本或图像的效果。尽管它在早期的网页设计中被广泛使用，但由于其不可访问性和对搜索引擎优化（SEO）的不利影响，现代网页设计中已经不推荐使用 <marquee> 标签。

基础概念

<marquee> 标签允许开发者指定文本或图像在页面上的滚动方式，包括滚动方向、速度和行为。

优势

简单易用，只需几行代码即可实现滚动效果。
兼容性好，几乎所有浏览器都支持。

类型

direction: 滚动方向，可以是 left、right、up 或 down。
behavior: 滚动行为，可以是 scroll（连续滚动）、slide（滚动一次后停止）或 alternate（来回滚动）。
scrollamount: 滚动速度，数值越大，速度越快。
scrolldelay: 滚动延迟，数值越大，延迟越长。

应用场景

新闻网站的滚动新闻栏。
广告横幅的滚动展示。
网页底部的版权信息滚动显示。

示例代码

<marquee behavior="scroll" direction="left" scrollamount="5">
  这是一个滚动的文本示例。
</marquee>

遇到的问题及解决方法

问题：滚动效果不流畅

原因：可能是由于页面加载缓慢或者浏览器性能问题导致的。 解决方法：

减少页面上的其他复杂元素，优化页面加载速度。
使用 CSS 和 JavaScript 来实现更流畅的滚动效果。

示例代码（使用 CSS 和 JavaScript 实现滚动效果）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Marquee</title>
<style>
  .marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
  }
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
</style>
</head>
<body>
<div class="marquee">
  <span>这是一个使用 CSS 和 JavaScript 实现的滚动文本示例。</span>
</div>
</body>
</html>

注意事项

尽量避免使用 <marquee> 标签，因为它不是 W3C 标准的一部分，并且可能会影响网页的可访问性。
使用现代的前端技术（如 CSS 动画和 JavaScript）来实现类似的效果，这样可以更好地控制滚动行为，并且更符合现代网页设计的标准。

通过上述方法，你可以实现更加灵活和可控的滚动效果，同时保持网页的良好性能和可访问性。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

HTML之marquee(文字滚动)详解

marquee> behavior 设定滚动的方式： alternate：表示在两端之间来回滚动。 scroll：表示由一端滚动到另一端，会重复。...="red"marquee> direction 设定活动字幕的滚动方向代码如下: marquee direction="down">设定活动字幕的滚动方向direction="down"：向下...">设定活动字幕的滚动方向direction="right"：向右marquee> marquee direction="up">设定活动字幕的滚动方向direction="up"：向上marquee...代码如下: marquee vspace="100" bgcolor="#CCCCCC">hspace="100"marquee> loop 设定滚动的次数，当loop=-1表示一直滚动下去，默认为...> marquee的滚动属性参数从marquee>开始到marquee>结束,其中有很多参数,其实,朋友们还是应用得很多了,让图片滚动起来,也是经常经常应用的,下面对这个网页参数的属性做一些简单的描述

8.4K16 3

JS魔法堂：通过marquee标签实现信息滚动效果

根据信息滚动效果我们可以有很多的实现方式，但HTML自带的 marquee标签是其中一个较简单的实现方式。下面记录一下，供日后查阅。...二、 marquee标签的基础知识　　　　　　　　　　　　　　　　　　　　　　　　　　示例： marquee behavior="scroll" direction="left" loop="-1..." scrollAmount="12" scrollDelay="42"> 滚动的信息 marquee> 属性 behavior ，滚动的方式。 ...三、鼠标悬浮暂停滚动、移除即恢复滚动　　　　　　　　　　　　　　　　　　　　 marquee onmouseover="this.stop();" onmouseout="this.start();..."> 滚动的消息 marquee> 四、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　当我们只需实现当条特别公告等简单信息滚动效果时，marquee标签是一个很不错的选择

4K7 0

Js 实现 marquee 效果

使用RequestAnimationFrame，核心部分就是利用transformX实现位移 Js 逻辑写的比较挫，还要想想怎么改进，或者有更好的思路。...marquee的要求是两段文字的间隔能人为的控制，所以用了两个重复的p标签。...currentDirection: true } }, watch: { during: function () { this.marquee...(); }, content: function () { this.marquee(); }, width: function () {...this.marquee(); }, fontsize: function () { this.marquee(); },

8.1K2 0

marquee一行代码实现滚动跑马灯效果无需js

网站设计案例展示一般用幻灯片切换会比较高大上，但这需要用到js，第三方博客等网站不支持外嵌js，或者有些网友不知道怎么用，有一种方法可以解决，用marquee>marquee>标签，可以实现多种滚动效果...，无需js控制。...语法：marquee behavior="滚动方式">......marquee> 3.scrollamount：滚动速度(滚动速度是设置每次滚动时移动的长度，以像素为单位) 语法：marquee scrollamount...11.color：设定滚动字幕的文字颜色语法：marquee color="#333">marquee> 12.size：设定滚动字幕的文字字号语法：marquee

5.9K5 0

Vue文字滚动插件marquee-components优化

实现单行文字水平滚动，在网上看了一个vue插件 marquee-components 安装 npm i marquee-components 使用在main.js中引入 import marquee...from 'marquee-components' Vue.use(marquee ); 在页面中使用 marquee :val...:val="title">marquee> import marquee from '....}, 但是如果一个页面有几个需要滚动的文字，需要修改代码，主要把原代码的通过选择器获取元素的方式修改为通过通过ref获取元素 marquee" ref="marquee">{{text}} {{text}}

3.9K1 0

滚动效果——marquee的html样式和CSS属性

html样式和CSS属性 marquee> 是滚动标签marquee>的属性 marquee>这是滚动效果——欢迎来到田小檬的博客marquee> 说明： scrolldelay，滚动延时，用于设定两次滚动操作之间的间隔时间...，该时间以毫秒为单位 behavior，滚动方式 alternate：表示在两端之间来回滚动。...scroll：表示由一端滚动到另一端，会重复。 slide：表示由一端滚动到另一端，不会重复

2.2K3 0

HTML滚动标签marquee的属性及效果实现

现在 marquee> 元素已经废弃，但有时候还是会用的到。虽然一些浏览器还支持，但是不推荐使用，因为说不定什么时候就不支持了。 ?...marquee 滚动标签常用属性 behavior 滚动方式 loop 循环次数 scrollamount 滚动时间 direction 滚动方向: bgcolor 背景颜色 height 高度 width...） number 数字（1、2、3） infinite 一直滚动滚动3次 infinite 一直滚动滚动方向 direction 语法： direction="" 滚动方向参数： left 左...right 右 down 下 up 上实例：向下滚动向上滚动向左滚动向右滚动滚动时间/速度 scrollamount 语法： scrollamount="" 滚动速度：默认值（600） number...marquee的属性及效果实现》 https://www.w3h5.com/post/303.html

2.5K1 1

Vue开发组件之替代marquee标签，超出宽度文字横向滚动效果

一、npm 安装如果你想安装插件（自己写的）安装 install dependencies npm i marquee-components 使用在main.js引入 import marquee...from ‘marquee-components’ Vue.use(marquee ); 在页面使用 marquee :val...="msg">marquee> export default { name: 'app', data () { return...vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue' } } } 123456789101112131415 val后加文字即可，当超过文本容器长度时，触动横向滚动效果...二、直接引入组件 marquee组件 marquee-wrap"> <p class="

2.4K3 0

JS简易整页滚动

fullPage超简易版本 1.知识点 JS 滚动监听事件 JS 移动端touch监听事件函数节流 DOM操作 2.示例GIF ?...CSS html, body设置 overflow 为 hidden, 让视图中只包括一个分页;设置滑动分页的长宽都是 100%; 外部容器设置 transition 过渡效果, 并设置为相对定位, 滚动是修改外部容器的...Top 值, 实现滚动效果. html, body { padding: 0; margin: 0; overflow: hidden; } .page-container { position...向下滚动时, 当 currentPosition 比 -整体分页高度大的时候(绝对值相比小的时候), 向下滚动;向上滚动时, 当 currentPosition 大于 0 的时候, 向上滚动. /...滚动事件firefox与其他浏览器的事件不同, 所以需要进行判断. deltaY大于0的时候, 想下滚动; 反之, 向上滚动. var handlerWheel = throttle(scrollMove

15.7K3 1

js 原生无缝滚动

(){ if(demo2.offsetHeight-demo.scrollTop滚动至demo1与demo2交界时 demo.scrollTop-=demo1.offsetHeight...,speed)//设置定时器 demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的 demo.onmouseout...(){ console.log(‘调用’) if(demo2.offsetHeight-demo.scrollTop滚动至demo1与demo2交界时 demo.scrollTop-...,speed)//设置定时器 demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的 demo.onmouseout...=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器

37.7K3 0

JS判断滚动条是否停止滚动

背景：昨天一个同事有种需求，有一个展示数据区域的div，带滚动条，当滚动条滚动时，需要向后台发请求，计算数据，再拿到前台展示。 ...分析：由于数据量级别较大，所以当滚动条滚动时，如果时时向后台发请求，对服务器和浏览器都造成巨大的压力。想到的解决方案是，当滚动条停止时，再去发请求计算数据。...那么问题来了，如何判断滚动条是否停止了呢？解决：搜索了一下，js本身是无法判断滚动条是在滚动状态还是停止状态，只有通过其它方式了。...后来想到的思路是当滚动条滚动的时候，发起一个定期执行的方法，并记录一次当前滚动条到顶部的距离，这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等，如果相等，那么说明停止滚动了，不相等，还在滚动。...-- // 让浏览器出现滚动条 for(var i = 0; i < 100; i++) { document.write(""); } var topValue = 0,//

17.4K0 0

JS 阻止页面滚动

在升级到 ios11.3 系统后，阻止页面滚动的代码 e.preventDefault 代码失效了。...表示事件采用冒泡机制（capture 译为捕获），浏览器默认就是 false passive:false 表示我现在主动告诉浏览器该监听器将使用 e.preventDefault() 来阻止浏览器默认的滚动行为...所以 Safari 中默认使用了 passive:true，告诉浏览器，此监听事件中，不会阻止默认的页面滚动。...所以 Safari 默认是不会阻止滚动的。通过 e.preventDefault(); 阻止默认的下拉滑动的效果，通过添加 passive:false 参数来兼容各个浏览器。...即可实现阻止移动页面滚动的功能。

23.1K5 0

js滚动到页面顶部

本文俺将教大家如何使用原生js的scrollTo来实现滚动到页面顶部。如果不需要使用动画来滚动，则不需要使用到任何插件。...我们可以使用原生的JavaScript window.scrollTo 传入0,0 将会立即滚动到页面左上角。...element.scrollTo(x-coord, y-coord); //或者 element.scrollTo(options) 参数 x-coord 是期望滚动到位置水平轴上距元素左上角的像素。...y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。或者 options 是一个ScrollToOptions对象。

14.3K4 0

JS实现图片循环滚动

之前在前端的时候有遇到这样一个问题，实现 JS 图片的循环滚动，然后鼠标移入的时候停止滚动，鼠标移开继续滚动，这里无非就是设置了一个定时器，鼠标移上时清除定时器达到滚动停止的目的，鼠标移开时重设定时器，...DOCTYPE> JS实现图片循环滚动 #roll {...text/javascript> var speed = 10//控制数字快慢 picture2.innerHTML = picture1.innerHTML function Marquee...demo.scrollLeft = 0 } else { demo.scrollLeft++ } } var MyMar = setInterval(Marquee...} demo.onmouseout = function() { //鼠标移开时重设定时器 MyMar = setInterval(Marquee, speed) }

19.8K3 0

js实现文字竖向滚动

/js/vue.js"> js/jquery-1.11.1.min.js"> (function (doc, win) { // 移动端适配 var...白衣扶2112弦领取247.11元现金 js

23.4K1 0

js动画之无缝滚动

DOCTYPE html> 无缝滚动 <style type="text...15px; opacity:0.5; } .right{ left:1010px; top:124px; } js.../move.js"> JS

15.1K4 0

js滚动到页面顶部

原生js的scrollTo来实现滚动到页面顶部。...setting the body scroll top to anchor top $('html, body').animate({scrollTop:target_top}, 500); }); js...平滑滚动到顶部,底部,指定地方采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用jquery中的animate，实现滚动的一个动作，慢慢的滚动到你想跳转到的位置滚动到顶部： $(...我们可以使用原生的JavaScript window.scrollTo 传入0,0 将会立即滚动到页面左上角。...y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。或者 options 是一个ScrollToOptions对象。

13.3K0 0

js中scroll滚动相关

js中scroll滚动相关 scroll，滚动，一般讨论的是网页整体与浏览器之间的关系。一.元素相关属性/方法解释 element.scrollHeight 返回元素的整体高度。...window中显示的文档，x和y指定滚动的相对量。...scrollBy(0, 200) ==> 使得滚动条Y轴的位置，在当前的基础上增加200。比如：当前Y轴位置为0，执行后便是200；当前为100，执行后便是300。...要使此方法工作 window 滚动条的可见属性必须设置为true！ 2.scrollTo(x,y) scrollTo(xpos,ypos) xpos 必需。...scrollTo(x,y)方法：滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的

7.8K1 0

liMarquee – jQuery无缝滚动插件

liMarquee 是一款基于 jQuery 的无缝滚动插件，类似于 HTML 的 marquee 标签，但比 marquee 更强大。...它可以应用于任何 Web 元素，包括文字、图像、表格、表单等元素，同时它可以设置不同的滚动方向（左右上下）、滚动速度、鼠标悬停暂停、鼠标拖动、加载 xml 文件等等。...Firefox ✔ Opera ✔ Safari ✔ 使用方法 1、引入文件 js.../jquery-1.9.0.min.js"> js/jquery.liMarquee.js"> 2、HTML <div class="dowebok...每次重复之前的延迟 scrollamount 整数 50 滚动速度，越大越快 circular 布尔值 true 无缝滚动，如果为 false，则和 marquee 效果一样 drag 布尔值 true

8.8K3 0

HTML新手上路随笔

但是使用js等效果的话，id必须唯一，不然js识别不到！...元素 marquee>marquee> 用来插入一段滚动的文字。...behavior：设置文本在 marquee 元素内如何滚动。可选值有 scroll(连续滚动)，slide(滑动一次) 和 alternate(往返滚动)。...direction：设置 marquee 内文本滚动的方向。可选值有 left, right, up and down。如果未指定值，默认值为 left。...loop：设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动. scrollamount ：设置每次滚动时移动的长度（以像素为单位）。

7435 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭