文本在屏幕上滚动，跑马灯，无缝滚动

最新推荐文章于 2021-12-16 17:51:50 发布

爱吃烧鸭蛋的叶安

最新推荐文章于 2021-12-16 17:51:50 发布

阅读量977

点赞数 2

分类专栏：特效

本文链接：https://blog.csdn.net/c_qianxia5040/article/details/119169639

版权

特效专栏收录该内容

31 篇文章 2 订阅

订阅专栏

在这里插入图片描述

左右无缝滚动效果

<marquee scrolldelay="10" direction="scroll">welcome</marquee>

一、常用属性
1.direction：滚动方向(包括4个值：up、down、left、right)

2.behavior：滚动方式(包括3个值：scroll、slide、alternate)

	scroll：循环滚动，默认效果；
	slide：只滚动一次就停止；
	alternate：来回交替进行滚动。

3.scrollamount：滚动速度(滚动速度是设置每次滚动时移动的长度，以像素为单位，默认值为6 ) scrollamount=“7”

4.scrolldelay:设定滚动两次之间的延迟时间，值大了会有一步一停顿的效果(设置滚动的时间间隔，单位是毫秒)

5.loop：设定滚动循环的次数(默认值是-1，滚动会不断的循环下去)

6.width、height：设定滚动字幕的宽度、高度

7.bgcolor：设定滚动字幕的背景颜色(可以是颜色值，也可以是rgb()或rgba()函数)

8.hspace、vspace：空白空间(相当于设置margin值)

 hspace：设定活动字幕里所在的位置距离父容器水平边框的距离，如hspace=“10”，即等同于：margin：0 10px；
 vspace：设定活动字幕里所在的位置距离父容器垂直边框的距离，如vspace=“10”，即等同于：margin：10px 0；

9.align：设定滚动字幕内容的对齐方式(包括9个值：absbottom、absmiddle、baseline、bottom、left、middle、right、texttop、top)

absbottom：绝对底部对齐（与g、p等字母的最下端对齐）
absmiddle：绝对中央对齐
baseline：底线对齐
bottom：底部对齐（默认）
left：左对齐
middle：中间对齐
right：右对齐
texttop：顶线对齐
top：顶部对齐

10.font：设定滚动字幕的文字字体
color：设定滚动字幕的文字颜色
size：设定滚动字幕的文字字号

用法：<marquee> <font size=+3 color=red>Hello,World</font> </marquee>

11.STRONG：设定滚动字幕的文字加粗

   <marquee STRONG></marquee>.

vspace：以像素或百分比值设置垂直边距
hspace：设置水平边距

<!-- 漂浮广告 -->
    <marquee behavior="alternate" height="300" direction="up" scrollamount="3" scrolldelay="30" width="300"
      bgcolor="#3399FF">
      <marquee behavior="alternate" height="50" direction="left" scrollamount="3" scrolldelay="30" width="100%">
        <font style="font-size: 35px">漂浮</font>
      </marquee>
    </marquee>

二、marquee常用到的两个方法：
onMouseOut=“this.start()” 用来设置鼠标移出该区域时继续滚动
onMouseOver=“this.stop()” 用来设置鼠标移入该区域时停止滚动
上面两个方法通常和鼠标事件配合，来实现“鼠标移入停止滚动，鼠标一开开始滚动”的效果。亲测有效

<marquee onMouseOut="this.start()" onMouseOver="this.stop()">marquee常用到的两个事件</marquee>

完整代码如下：

<marquee id="affiche" 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()" onMouseOver="this.stop()">

三、事件回调
onbounce：当 marquee 滚动到结尾时触发。它只能在 behavior 属性设置为 alternate 时触发。
onfinish：当 marquee 完成 loop 属性设置的值时触发。它只能在 loop 属性设置为大于 0 的某个数字时触发。
onstart：当 marquee 开始滚动时触发。

其次，marquee 还可以做滚动条效果，具体自己摸索着做吧

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    .a,
    .b,
    .c {
      box-sizing: border-box;
      border: 1px solid;
    }

    .wrap {
      width: 250px;
    }

    .a {
      width: 100px;
      height: 100px;
      float: left;
    }

    .b {
      width: 100px;
      height: 50px;
      float: left;
    }

    .c {
      width: 100px;
      height: 100px;
      display: inline-block;
    }
  </style>
</head>

<body>
  <div>
    <marquee align="left" onstart="startMaqueeFun()" onbounce="MaqueeBounceFun()" onfinish="finishMaqueeFun()"
      behavior="alternate" bgcolor="pink" color="#fff" direction="down" height="250" width="200" hspace="20" vspace="20"
      loop="10" scrollamount="7" scrolldelay="100">

      <font size=+3 color=red>Hello,World</font>
      <!-- <ul>
        <li>1kajdskd</li>
        <li>sdsda</li>
        <li>rerebvbdsfdf</li>
        <li>kajdskd</li>
        <li>sdsda</li>
        <li>rerebvbdsfdf</li>
        <li>kajdskd</li>
        <li>sdsda</li>
        <li>rerebvbdsfdf</li>
        <li>kajdskd</li>
        <li>sdsda</li>
        <li>rerebvbdsfdf</li>
        <li>kajdskd</li>
        <li>sdsda</li>
        <li>rerebvbdsfdf</li>
        <li>kajdskd</li>
        <li>sdsda</li>
        <li>rerebvbdsfdf</li>
        <li>kajdskd</li>
        <li>sdsda</li>
        <li>000rerebvbdsfdf</li>
      </ul> -->
    </marquee>
    <!-- 漂浮广告 -->
    <marquee behavior="alternate" height="300" direction="up" scrollamount="3" scrolldelay="30" width="300"
      bgcolor="#3399FF">
      <marquee behavior="alternate" height="50" direction="left" scrollamount="3" scrolldelay="30" width="100%">
        <font style="font-size: 35px">漂浮</font>
      </marquee>
    </marquee>
    <div style="width: 300px;height: 300px;background: lightblue;">
      <marquee behavior=scroll>一圈一圈绕着走！</marquee>
      <marquee behavior=slide>只走一次就歇了！</marquee>
      <marquee behavior=alternate>来回走</marquee>
    </div>
  </div>
  <script>
    function MaqueeBounceFun() {
      console.log("我滚到结尾啦！");
    }
    function finishMaqueeFun() {
      console.log("滚动结束啦，可以休息啦！");
    }
    function startMaqueeFun() {
      console.log("我要开始滚动了哦，眼睛不要眨哦！");
    }
  </script>
</body>

</html>