html文字滚动效果演示

最新推荐文章于 2021-06-04 12:50:19 发布
最新推荐文章于 2021-06-04 12:50:19 发布
阅读量1.1k 收藏 2
点赞数 1
分类专栏： 通达OA 文章标签： OA html 滚动 MARQUEE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hai7425/article/details/72674440
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字滚动演示</title>
</head>

<body>
<P>
<MARQUEE onMouseOut="this.start()" onMouseOver="this.stop()" behavior="scroll" direction="left" scrollamount="10" scrolldelay="1">自己滚动吧自己滚动吧自己滚动吧自己滚动吧自己滚动吧自己滚动吧
<BR>

自己滚动吧自己滚动吧自己滚动吧自己滚动吧自己滚动吧<BR></MARQUEE></P>


<P>
<div>
<MARQUEE onMouseOut="this.start()" onMouseOver="this.stop()" behavior="scroll" direction="up" scrollamount="2" height="40px" scrolldelay="1">自己滚动吧自己滚动吧自己滚动吧自己滚动吧自己滚动吧自己滚动吧
<BR>

自己滚动吧自己滚动吧自己滚动吧自己滚动吧1自己滚动吧<BR>
自己滚动吧自己滚动吧自己滚动吧自己滚动吧2自己滚动吧<BR>
自己滚动吧自己滚动吧自己滚动吧自己3滚动吧自己滚动吧<BR>
自己滚动吧自己滚动吧自己滚动4吧自己滚动吧自己滚动吧<BR>
自己滚动吧自己滚动吧自己5滚动吧自己滚动吧自己滚动吧<BR>
自己滚动吧自己滚动吧6自己滚动吧自己滚动吧自己滚动吧1<BR>
</MARQUEE></P>
marquee语法<br />
    <marquee></marquee><br />
<br />
实例一<br />
<marquee>Hello, World</marquee><br />
<br />
marquee常用到的两个事件：<br />
onMouseOut="this.start()" 当鼠标移出该区域时<br />
onMouseOver="this.stop()" 当鼠标移入该区域时<br />
<br />
实例二<br />
<marquee onMouseOut="this.start()" onMouseOver="this.stop()">marquee常用到的两个事件</marquee><br />
<br />
下面开始说一下marquee所支持的属性<br />
<br />
behavior设定滚动的方式：<br />
    alternate：来回滚动。<br />
    scroll：   重复滚动。<br />
    slide：    不重复滚动。
<p>代码如下:</p>
<p><marquee behavior="alternate">来回滚动。 </marquee></p>
<p><marquee behavior="scroll">重复滚动。</marquee></p>
<p><marquee behavior="slide">不重复滚动。</marquee></p>
<p><br />
</p>
<p>bgcolor设定活动字幕的背景颜色。</p>
<p>代码如下:</p>
<p><marquee bgcolor="#006699">设定活动字幕的背景颜色</marquee></p>
<p><marquee bgcolor="RGB(10%,50%,100%,)">设定活动字幕的背景颜色 </marquee></p>
<p><marquee bgcolor="red">设定活动字幕的背景颜色</marquee></p>
<p><br />
</p>
<p>direction设定活动字幕的滚动方向</p>
<p>代码如下:</p>
<p><marquee direction="down">设定活动字幕的滚动方向向下</marquee></p>
<p><marquee direction="left">设定活动字幕的滚动方向向左</marquee></p>
<p><marquee direction="right">设定活动字幕的滚动方向向右</marquee></p>
<p><marquee direction="up">设定活动字幕的滚动方向向上</marquee></p>
<p><br />
</p>
<p>height设定活动字幕的高度</p>
<p>代码如下:</p>
<p><marquee height="500" direction="down" bgcolor="#CCCCCC">设定活动字幕的高度</marquee></p>
<p><br />
</p>
<p>width设定活动字幕的宽度</p>
<p>代码如下:</p>
<p><marquee width="500" bgcolor="#CCCCCC">设定活动字幕的宽度</marquee></p>
<p><br />
</p>
<p>loop设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1</p>
<p>代码如下:</p>
<p><marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee></p>
<p><marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee></p>
<p><br />
</p>
<p>scrollamount设定活动字幕的滚动速度，单位pixels</p>
<p>代码如下:</p>
<p><marquee scrollamount="10" >scrollamount="10" </marquee></p>
<p><marquee scrollamount="20" >scrollamount="20" </marquee></p>
<p><marquee scrollamount="30" >scrollamount="30" </marquee></p>
<p><br />
</p>
<p>scrolldelay设定活动字幕滚动两次之间的延迟时间，单位millisecond（毫秒）</p>
<p>值大了会有一步一停顿的效果</p>
<p>代码如下:</p>
<p><marquee scrolldelay="10" >scrolldelay="10" </marquee></p>
<p><marquee scrolldelay="100" > scrolldelay="100"</marquee></p>
<p><marquee scrolldelay="1000">scrolldelay="1000" </marquee></p>
</body>
</html>

hai7425
关注
专栏目录
html实现文字滚动
weixin_35750747的博客
12-21 3829
要在HTML中实现文字滚动，您可以使用<marquee>元素。 例如，下面的代码将显示一行滚动文字： <marquee>这是一行滚动文字。</marquee> 您还可以使用direction属性来指定文字滚动的方向，例如： <marquee direction="left">这是从右向左滚动的文字。</marquee> 您还可以使用s...
HTML5 - 文字跑马灯标签(marquee)屏幕滚动文字
王佳斌
11-15 8191
属性 <marquee> </marquee> 标签有以下属性可选，在使用务必测试好各浏览器兼容性。 属性 描述 behavior 设置文本在 marquee 元素内如何滚动。可选值有 scroll，slide 和 alternate。 如果未指定值，默认值为 scroll。 bgcolor 通过颜色名称或十六进制值设置背景颜色。 directio...
文字滚动
坚如磐石
11-12 611
原文章链接https://blog.csdn.net/GUDUzhongliang/article/details/109511170?utm_medium=distribute.pc_feed.none-task-blog-personrec_tag-8.nonecase&depth_1-utm_source=distribute.pc_feed.none-task-blog-personrec_tag-8.nonecase&request_id=5fab1cd63af9143251b7f
HTML中实现文字各种滚动
09-07
HTML中实现文字各种滚动HTML中实现文字各种滚动HTML中实现文字各种滚动HTML中实现文字各种滚动
html 设置滚动文字效果,HTML中滚动文字设置
weixin_34621896的博客
06-04 2874
的用途比较广泛,在这里详细讲解一下.主要参数设置:align：是设定活动字幕的位置，除了居左、居中、居右三种位置外，又增加靠上(top)和靠下(bottom)两种位置。Bgcolor：用于设定活动字幕的背景颜色，可以使用英文的单词也可以是十六进制数的。Direction：用于设定活动字幕的滚动方向是向左(left)、向右(right)、向上(up)、向下(down)。Behavior：用于设定滚动...
浅析js 文字滚动效果
10-29
在互联网页面设计中，文字滚动效果是一种常见且实用的设计技巧，尤其适用于需要动态展示信息的场景，如企业公告、文字链广告等。实现这种效果通常涉及前端技术，主要包括HTML、CSS和JavaScript。通过这些技术的结合...
CSS3 HTML5仿苹果手机文字无缝滚动.rar
07-10
在HTML5中，我们可以使用`<marquee>`标签来实现简单的文字滚动效果，但这个标签已被废弃，因为它缺乏对现代网页设计需求的灵活性和控制力。CSS3的引入则为创建复杂且自定义的滚动效果提供了可能。通过CSS3的`...
js+div实现文字滚动和图片切换效果代码
10-23
1. **文字滚动效果的实现**：首先，通过HTML和CSS设置好基本页面结构和样式。接着，利用JavaScript实现文字在div中的滚动效果。这涉及到JavaScript中关于定时器函数（如`setInterval`）的使用，通过定时改变div内的...
html5实现ppt文字幻灯片演示特效.zip
07-05
在“html5实现ppt文字幻灯片演示特效”这个项目中，开发者利用HTML5的特性，模拟了传统PPT（PowerPoint）的文字幻灯片演示效果，让用户可以在网页上实现类似PPT的浏览体验。 首先，这个特效的核心是HTML5的`...
HTML文字向上滚动特效
10-29
网页常用的文字向上滚动html代码，下载后改下相关链接地址，就可以使用了！
文字自动滚动效果_俗称：文字跑马灯效果
02-21
文字可以自己滚动，无缝衔接的文字跑马灯效果。没毛病！
文字上下滚动（走马灯效果）
01-16
网上找到很多文字滚动，但都良莠不齐，基本都是左右滚动的，没有上下滚动。所以来分享一波 利用scortop实现文字移动，判断如果第一个元素的高度，如果小于等于了scrolltop（翻滚了多少高度）就把它删除并且添加到后面
html纵向字幕无缝滚动,html文字无缝滚动代码
weixin_35997133的博客
06-02 700
这篇文章主要为大家详细介绍了html文字无缝滚动代码，具有一定的参考价值，可以用来参考一下。实例一：经测试代码如下：滚动板body { font: 12px/1 "宋体", SimSun, serif; background:#fff; color:#000; }.scrollUl { overflow:hidden; position:relative; }#scrollUlTest1 {hei...
HTML如何实现滚动文字
热门推荐
m0_52813455的博客
05-08 1万+
一、HTML滚动文字 marquee 滚动文字标签 在一个页面中会有很多多媒体元素，比如动态文字、动态图象、音视频等，而最简单的就是天价滚动文字了，在HTML中，如果我们想要添加滚动文字，需要使用marquee标签。 我们先来看一下最简单的示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>marquee</title>
关于html文字滚动效果
zhongkewen的专栏
10-22 2544
Code: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   html>   head>   title> code.js.cn title>   style>   a{display:block;font-size:15px;line-height:
html实现文字滚动效果
Dreamy smile
05-20 5058
marquee标签 <marquee></marquee> //例 <marquee align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOve.
html文字滚动效果
现实与爱的博客
09-02 4526
marquee标签单个滚动效果 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;marquee&lt;/title&gt; &lt;/head&gt; &lt;body styl
HTML文字滚动效果<marquee>
weixin_30586085的博客
05-08 151
<marquee></marquee> 属性：(1)behavior：设置滚动方式 　　　　　　a)alternate：在边框之间来回滚动 　　　　　　b)Scroll：循环滚动(由一端滚向另一端，会重复) 　　　　　　c)Slide：只滚动一次 　　　(2)direction：设置滚动的方向 　　　　　　a)down：从上向下滚动 　　　　　　b)Left：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hai7425

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值