3-12. marquee标签

作者: 一Left一 | 来源:发表于2017-11-12 10:41 被阅读18次

    1、作用: 跑马灯
    HTML marquee 元素(<marquee>) 用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。
    由于marquee标签现在用得是越来越少了,所以滚动效果的做法大多也都改用javascript来实现了

    2、格式:<marquee>内容</marquee>

    3、属性:

    • direction: 设置滚动方向 left/right/up/down
    • scrollamount: 设置滚动速度, 值越大就越快
    • loop: 设置滚动次数, 默认是-1, 也就是无限滚动
    • behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
      注意点:
    • marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好
    <body>
    <!--
    作用: 是包含的文本或者内容有不同样式的运动/动画
    格式:
    <marquee>内容</marquee>
    属性:
    direction: 设置滚动方向 left/right/up/down
    scrollamount: 设置滚动速度, 值越大就越快
    loop: 设置滚动次数, 默认是-1, 也就是无限滚动
    behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
    -->
    <!--1方向 -->
    <marquee width="100" height="100" bgcolor="green" direction="left"> 放血大甩卖!!!</marquee>
    <marquee width="100" height="100" bgcolor="green" direction="right"> 放血大甩卖!!!</marquee>
    <marquee width="100" height="100" bgcolor="green" direction="up"> 放血大甩卖!!!</marquee>
    <marquee width="100" height="100" bgcolor="green" direction="down"> 放血大甩卖!!!</marquee>
    <hr>
    <!-- 2.不同滚动速度 -->
    <marquee width="100" height="100" bgcolor="green" direction="up" scrollamount="1"> 放血大甩卖!!!</marquee>
    <br>
    <marquee width="100" height="100" bgcolor="green" direction="down" scrollamount="100"> 放血大甩卖!!!</marquee>
    <hr>
    <!--3.是否循环-->
    <marquee width="100" height="100" bgcolor="green" direction="right" loop="2"> 放血大甩卖!!!</marquee>
    <br>
    <marquee width="100" height="100" bgcolor="green" direction="right" loop="1"> 放血大甩卖!!!</marquee>
    <!--4.滚动类型-->
    <marquee width="300" height="100" bgcolor="green" direction="right" behavior="slide"> 放血大甩卖!!!</marquee>
    <marquee width="300" height="100" bgcolor="green" direction="left" behavior="alternate"> 放血大甩卖!!!</marquee>
    </body>
    
    图片.png

    相关文章

      网友评论

        本文标题:3-12. marquee标签

        本文链接:https://www.haomeiwen.com/subject/tkgmmxtx.html