Marquee标签实现跑马灯、滚动公告、通知效果

1.Marquee基本语法

<marquee> … </marquee>

实例演示:会移动的文字(Marquee)

<marquee>啦啦啦,我会移动耶!</marquee>

2.文字移动属性

(1)方向 :direction=#

  • #=left, right,up,down

例:

<marquee direction=left>啦啦啦,我从右向左移!</marquee>
<marquee direction=right>啦啦,我从左向右移!</marquee>
<marquee direction=up>啦啦啦,我从下向上移!</marquee>
<marquee direction=down>啦啦,我从上向下移!</marquee>

(2)方式: behavior=#

  • #=scroll(循环),
  • slide(只走一次)
  • alternate(来回走,文字在边界内撞来撞去)
<marquee behavior=scroll>啦啦啦,我一圈一圈绕着走!</marquee> <P>
<marquee behavior=slide>啦啦啦,我只走一次就歇了!</marquee> <P>
<marquee behavior=alternate>啦啦啦,我来回走耶!</marquee>

(3)循环:  loop=#

  • #=次数;若未指定则循环不止(infinite)
<marquee loop=1 width=50% behavior=scroll>啦啦啦,我只走 1 趟哟!</marquee> <P>
<marquee loop=2 width=50% behavior=slide>啦啦啦,我只走 2 趟哟!</marquee> <P>
<marquee loop=3 width=50% behavior=alternate>啦啦啦,我只走 3 趟哟!</marquee>

(4)速度: scrollamount=#

通过这个属性能够调整文字滚动的速度。值越大速度越快。

<marquee scrollamount=20>啦啦啦,我走得好快哟!</marquee>

(5)延时: scrolldelay=#

通过这个属性,可以在每一次滚动的间隔产生一段时间的延迟。

<marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee>

3.外观(Layout)设置

(1)底色: bgcolor=#

#=RRGGBB  16 进制颜色代码

<marquee  bgcolor="#CCCCCC">
啦啦啦,我会移动耶!
</marquee>

(2)面积: height=#  width=#

<marquee height="40" width="50%">
啦啦啦,我会移动耶!
</marquee>

(3)hspace、vspace:空白空间(相当于设置margin值)

说明:hspace:设定活动字幕里所在的位置距离父容器水平边框的距离,如hspace=“10”,即等同于:margin:0 10px;

vspace:设定活动字幕里所在的位置距离父容器垂直边框的距离,如vspace=“10”,即等同于:margin:10px 0;

<marquee hspace="10"  vspace="10">啦啦啦,我会移动耶!</marquee>

marquee常用到的两个事件:

onMouseOut=”this.start()” 用来设置鼠标移出该区域时继续滚动
onMouseOver=”this.stop()” 用来设置鼠标移入该区域时停止滚动

 125网页设计-权威的网页制作,网页设计教程基地 
 

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3307.html

(4)
江山如画的头像江山如画管理团队
上一篇 2019年2月21日 下午12:59
下一篇 2019年2月26日 下午2:07

99%的人还看了以下文章

  • 如何单独设置打印网页的样式

    做项目,有些网页需要打印,很多时候,是导出WORD或EXCEL再打印。 现在需要页面直接打印,方便没有安装OFFICE的用户。 需求:页面在浏览器中浏览是一种样式,要打印这个页面,是另一种样式。 解决方法:用link标签中的media属性解决此问题。 <link href=”stylesheets/print.css” media=”print” re…

    2019年2月15日
    1.5K0
  • 第15课:用z-index进行层次堆叠

    CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。 为此,你可以为每个元素指定一个数字(z-index)。其原理是:数字较大的元素将叠加在数字较小的元素之上。 比方说,我们正在打扑克,并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…

    2020年2月25日
    2.0K0
  • 跟永哥学HTML5(1):认识html5

    HTML5(简称H5),是超文本标记语言(HTML)的第五次重大修改,是最新一代的超文本标记语言,它不单单是一种标记语言,更为下一代 Web 提供了全新功能 。

    2018年1月21日
    2.0K0
  • 第5课:文本

    文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解: text-indent text-align text-decoration letter-spacing text-transform 文本缩进[text-indent] CSS属性text-indent用于为段落设置…

    2020年2月22日
    2.3K0
  • 网页设计常见css3动画效果(摆动、缩放、旋转、透明、反弹)

    网页上常看到某个DIV或图片有渐入、摆动、缩放、旋转、透明、反弹等效果,今天分享给大家! <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=n…

    2022年5月9日
    1.2K0
  • 手把手,永哥教你学会css sprite(雪碧图)技术

    css sprite又称雪碧图或css精灵。 雪碧图就是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更加友好。 css sprite优点: 有效减少网站的http请求数量,加…

    2018年2月20日
    5.4K0

发表回复

登录后才能评论