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

相关文章