h5跑马灯实现marquee

于 2024-04-26 10:51:54 发布
阅读量231 收藏
点赞数 3
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sun3024/article/details/138211922
版权 
<marquee style="position: absolute;z-index: 999;color: red;font-weight: bold;font-size: 18px;" align="left" behavior="scroll" direction="left" height="30px" width="100%" hspace="50" vspace="5" loop="5" scrollamount="5" scrolldelay="100" onMouseout="this.start()" onMouseover="this.stop()">
	<div class="hide" id="affiche">
		<img width="20" height="20" src="imgs/xxx.png"></img>
		<font style="cursor: pointer;line-height: 17px;" id="alarm">xxx</font>
	</div>
</marquee>

marquee属性说明：
behavior：滚动方式，scroll（连续滚动）
direction：滚动方向，默认left
loop：循环次数，默认6，我这里是5次滚动结束
scrollamount：滚动速度
scrolldelay：停顿时间
hspace：到边界的水平距离
vspace：到边界的垂直距离

sun3024
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端：弹幕标签用法详细介绍（跑马灯）
m0_59092234的博客
07-31 587
1，注意弹幕标签marquee，现在一些浏览器是不支持的2，弹幕标签也叫跑马灯。
jQuery文字跑马灯插件Marquee
12-10
其中，跑马灯效果是一种常见的滚动显示文本的方式，它可以使信息在有限的空间内持续滚动展示，而jQuery.Marquee插件就是实现这一效果的优秀工具。 ## jQuery库简介 jQuery是一款高效、简洁的JavaScript库，它简化...
HTML5 - 文字跑马灯标签(marquee)屏幕滚动文字
王佳斌
11-15 8120
属性 <marquee> </marquee> 标签有以下属性可选，在使用务必测试好各浏览器兼容性。 属性 描述 behavior 设置文本在 marquee 元素内如何滚动。可选值有 scroll，slide 和 alternate。 如果未指定值，默认值为 scroll。 bgcolor 通过颜色名称或十六进制值设置背景颜色。 directio...
CSS3+H5实现跑马灯效果
qq_44577699的博客
09-20 795
CSS3+H5实现跑马灯效果。
marquee 跑马灯
Vincentyun
05-23 429
&amp;lt;!-- js实现 --&amp;gt; &amp;lt;p id=&quot;scrollobj&quot; style=&quot;white-space:nowrap;overflow:hidden;width:300px;margin: auto;&quot; onmouseover=&quot;jsStop()&quot; onmouseout=&quot;jsStart()&quot;&
跑马灯标签<marquee>
qq_42610806的博客
03-18 656
&lt;marquee&gt;标签： 期初是为了实现天气信息在页面上的滚动问题，使用了css3中animation方法，但是由于滚动内容的长度会随内容变化，所以要不断改变滚动的长度和时间，比较麻烦。 然后看到了&lt;marquee&gt;标签，标签可以自己根据内容自己变化动画长度的播放效果。 属性： align：{ 设定&lt;marquee&gt;标签内容的对齐方式 ab...
实现了一个跑马灯(marquee)
z304607523的专栏
04-27 556
#服务器升级公告 New #lllllllllll-----------------llllllllllllllllll_----~~~~ #hahhaha ~~~~~~~!!!!!!((((((~~~)))))) #zzzzzzzzorzozrorzooooooorrrr
HTMl 中marquee标签实现无缝滚动跑马灯效果
11-21
HTML中的`<marquee>`标签是一种特殊的标签，用于创建滚动或滑动文本效果，常见于早期网页设计中，尤其在创建跑马灯效果时。它并非HTML标准的一部分，而是属于 Netscape Navigator 和 Internet Explorer 的非标准扩展...
基于Marquee.js插件实现的跑马灯效果示例
10-20
Marquee.js是一个JavaScript插件，专门用于实现跑马灯效果，即内容在页面上连续滚动显示，常用于网站头部或底部的信息展示。本示例详细介绍了如何使用Marquee.js来创建这种动态滚动效果。 首先，我们需要理解...
Vue实现简单的跑马灯
10-15
在本示例中，我们将探讨如何使用Vue实现一个简单的跑马灯效果，这是一种常见的动态展示文本的方式，常用于新闻滚动或公告栏。 首先，让我们分析提供的代码。HTML结构包含一个`<div>`元素，其ID为`app`，这是Vue实例...
HTML动态立体跑马灯
03-13
HTML实现动态跑马灯，使用简单的内部CSS实现，无外嵌js代码，简单易懂，一看就学的会。
自适应跑马灯效果
02-22
html+js实现的跑马灯效果，挺不错的
html标记大全 有marquee，table，form等最常用标记。
03-04
html标记大全，基本都有，欢迎下载！ HTML语言语法大全 <! - - ... - -> 批注 <!> 跑马灯 <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marquee behavior=scroll>...</marquee>预设卷动 <marquee behavior=alternate>...</marquee>来回卷动 <marquee direction=down>...</marquee>向下卷动 <marquee direction=up>...</marquee>向上卷动 <marquee direction=right></marquee>向右卷动 <marquee direction=’left’></marquee>向左卷动
android TextView实现跑马灯效果
08-30
其中，`android:singleLine="true"` 用于将文本限制在一行中，`android:ellipsize="marquee"` 用于实现跑马灯效果，`android:focusable="true"` 和 `android:focusableInTouchMode="true"` 用于让 TextView 获得焦点...
marquee标签（跑马灯）
weixin_34293246的博客
01-18 143
转载于:https://www.cnblogs.com/songxia/p/10288967.html
flutter开发实战-实现marquee根据文本长度显示文本跑马灯效果
一名开发者
08-09 3559
flutter开发实战-实现marquee根据文本长度显示文本跑马灯效果。通过TextPainter计算文本内容的宽度与ContainerWidth进行对比确定是否需要显示marquee。
h5跑马灯效果
ae_pppppp的博客
04-06 320
1.无缝滚动1个内容区域，复制一下这个内容，追加到改内容的后面，形成无缝滚动的效果。无缝滚动效果 ，外加 手指的移动效果。2.手指左滑右滑进行x轴方向的加减。
【鸿蒙软件开发】ArkTS基础组件之Marquee(文字跑马灯)、QRCode(二维码生成)
最新发布
m0_62599305的博客
10-27 1405
Marquee组件：跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。QRCode组件：用于显示单个二维码的组件。Marquee组件：跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。QRCode组件：用于显示单个二维码的组件。
js实现走马灯
weixin_40543741的博客
08-21 849
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;跑马灯效果&lt;/title&gt; &lt;style type="text/css"&gt;
Vue跑马灯marquee组件
04-06
Vue跑马灯 (marquee) 组件是一种常见的UI组件，可以用于在页面上展示滚动的文字或图片。以下是一个简单的Vue跑马灯组件示例： ```vue <template> <div class="marquee"> <div class="marquee-content" :style="{transform: 'translateX(' + position + 'px)'}"> <slot></slot> </div> </div> </template> <script> export default { data() { return { position: 0, interval: null }; }, mounted() { this.interval = setInterval(() => { const content = this.$el.querySelector('.marquee-content'); const width = content.offsetWidth; const parentWidth = this.$el.offsetWidth; if (width > parentWidth) { this.position -= 1; if (Math.abs(this.position) >= width) { this.position = parentWidth; } } }, 20); }, beforeDestroy() { clearInterval(this.interval); } }; </script> <style> .marquee { overflow: hidden; } .marquee-content { display: inline-block; white-space: nowrap; } </style> ``` 在上面的示例中，我们定义了一个名为 `marquee` 的组件，它包含一个名为 `marquee-content` 的子组件，用于包裹滚动的内容。我们使用CSS的 `overflow` 属性设置父元素为 `hidden`，以隐藏超出父元素边界的内容。 在 `mounted` 钩子函数中，我们使用 `setInterval` 函数定时更新 `marquee-content` 的 `transform` 属性，以实现滚动效果。我们在 `beforeDestroy` 钩子函数中清除定时器，以避免内存泄漏。 在使用 `marquee` 组件时，我们可以将需要滚动的内容插入到组件中，例如： ```vue <marquee> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </marquee> ``` 在上面的示例中，我们插入了三张图片到 `marquee` 组件中。这些图片将在组件中滚动，并且当它们的宽度超出父元素的宽度时，它们将自动滚动。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值