跑马灯标签<marquee>

4 篇文章 0 订阅

<marquee>标签:

期初是为了实现天气信息在页面上的滚动问题,使用了css3中animation方法,但是由于滚动内容的长度会随内容变化,所以要不断改变滚动的长度和时间,比较麻烦。

 

然后看到了<marquee>标签,标签可以自己根据内容自己变化动画长度的播放效果。

属性:

align:{

设定<marquee>标签内容的对齐方式

absbottom:绝对底部对齐(与g、p等字母的最下端对齐)

absmiddle:绝对中央对齐

baseline:底线对齐

bottom:底部对齐(默认)

left:左对齐

middle:中间对齐

right:右对齐

texttop:顶线对齐

top:顶部对齐

},

behavior{//滚动方式

alternate: 表示在两端之间来回滚动。

scroll: 表示由一端滚动到另一端,会重复。

slide:      表示由一端滚动到另一端,不会重复。

},

bgcolor{//背景颜色

#ffffff,

rgb(),

”red“

},

direction{//内容滚动的方向

down,

up,

left,

right

},

loop{

-1:无限次,

1,2,3,4,5...次数

},

scrolldelay{//延迟时间

1000//毫秒

},

scrollamount{//播放速度

20

},

onMouseOut=this.start() .....鼠标移出状态滚动

onMouseOver=this.stop() .....鼠标经过时停止滚动

使用方法如下

<marquee onMouseOut=this.start()>移出时滚动

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值