首页
学习
活动
专区
圈层
工具
发布

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标签是一个很不错的选择

4.8K70
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML之marquee(文字滚动)详解

    1️⃣ marquee> 标签简介marquee> 是 HTML 中实现文字或图片滚动效果的标签特点:可以让文字或图片水平或垂直滚动仅适用于简单动画注意:该标签 已被 HTML5 弃用,现代网页推荐使用...CSS 动画或 JavaScript 替代<marquee>这是滚动文字示例</marquee>2️⃣ 基本属性属性说明示例direction滚动方向left / right / up /...direction="left" scrollamount="5">水平向左滚动文字</marquee>3.2 垂直滚动<marquee direction="up" scrollamount...</marquee>3.4 控制循环次数<marquee loop="3">文字滚动三次</marquee>4️⃣ 鼠标交互控制暂停滚动:<marquee onmouseover...="this.stop();" onmouseout="this.start();">鼠标悬停时暂停滚动</marquee>说明:onmouseover → 鼠标悬停事件onmouseout →

    55910

    marquee 标签参数详细说明

    marquee 元素(marquee>)可以 用来插入一段滚动的文字,实现类似走马灯的动效。 但这个标签已经过时(MDN文档已经不建议使用),此前因之前项目紧急用过,做个标签参数小结。...marquee> 2. 方法 start:开始滚动 marquee。 stop:停止滚动 marquee。 上面两个方法通常和鼠标事件配合,来实现“鼠标移入停止滚动,鼠标一开开始滚动”的效果。...marquee onmouseover="this.stop();" onmouseout="this.start();"> 系统通知:1.xxxxxx; 2.xxxxxxx....marquee> 3. 事件回调 onbounce:当 marquee 滚动到结尾时触发。它只能在 behavior 属性设置为 alternate 时触发。...; } 参考文章: MDN文档 Marquee标签 html之marquee详解(超详细!)

    3.1K10
    领券