首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

    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详解(超详细!)

    2.5K10

    HTML跑马灯

    引言 HTML提供了一种非常简单实现跑马灯效果的标签,Marquee标签,通过设置不同的属性,可以实现不同的跑马灯效果: 跑马灯的背景及背景 宽123 高77 背景色为#f5f5f5的滚动区域: marquee...marquee> 这是一个跑马灯 跑马灯速度 scrollamount:数值越大,滚动速度越快 通常设为5-10 marquee scrollamount="7">这是一个速度为7的滚动marquee..."right">向右滚动marquee> 向右滚动 跑马灯循环 loop:设置跑马灯循环次数;默认值为-1或infinite,表示无限循环滚动 marquee loop="3">这是一个循环三次滚动...="77">这是一个跑马灯marquee> 这是一个跑马灯 滚动事件 onmouseover:鼠标悬停事件 onmouseout:鼠标移开事件 this.stop():停止滚动 this.start...():开始滚动 marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()">鼠标悬停时,停止滚动;鼠标离开时

    1.7K20
    领券