html的marquee标签介绍

marquee的基本属性:

//滚动方向 direction
<!--滚动方向 direction 4个值 up down left right  默认从右向左-->
<marquee direction="up">我想上滚动</marquee>
--------------------------------------------------------------------------------
//滚动方式 behavior
<!--3个值 scroll-循环滚动 slide-只滚动一次 alternate-来回滚动  默认循环滚动-->
<marquee behavior="slide">我只滚动一次</marquee>
--------------------------------------------------------------------------------
//滚动速度 scrollamount
<!--值越大,滚动速度越快 一般5-10比较适宜消息观看-->
<marquee scrollamount="5">我是速度为5的滚动</marquee>
--------------------------------------------------------------------------------
//滚动延迟 scrolldelay
<!--值越大,滚动速度越慢,通常不设置-->
<marquee scrolldelay="90">我延迟滚动</marquee>
--------------------------------------------------------------------------------
//滚动循环 loop
<!-- 默认值-1或infinite 表示无限循环滚动 loop="数值" 表示滚动相应的次数-->
<marquee loop="2">我是loop循环滚动</marquee>
--------------------------------------------------------------------------------
//滚动背景颜色 bgcolor
//宽100px 高90px 背景色为#f5f5f5的滚动区域
<marquee direction="up" width="100" height="90" bgcolor="#f5f5f5" >
    <p>开发工程师</p>
    <p>设计师</p>
    <p>前端开发</p>
</marquee>
--------------------------------------------------------------------------------
//滚动空间 hspace-水平边距 vspace-垂直边距
<marquee direction="up" width="50" hspace="20" vspace="10" >
    <p>开发工程师</p>
    <p>设计师</p>
    <p>前端开发</p>
</marquee>
--------------------------------------------------------------------------------
//滚动事件
//鼠标悬停,滚动停止   鼠标离开,滚动继续
<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()">
    <p>开发工程师</p>
    <p>设计师</p>
    <p>前端开发</p>
</marquee>
--------------------------------------------------------------------------------

代码的使用,循环图片:

<div data-options="region:'north',border:'false'" style="height:200px;">
    <marquee direction="left" width="100%" height="200px"  onmouseover="this.stop()" onmouseout="this.start()">
        <img src="../img/00.jpg" style="height:200px;"/>
        <img src="../img/44.jpg" style="height:200px;"/>
        <img src="../img/51.jpg" style="height:200px;"/>
        <img src="../img/55.jpg" style="height:200px;"/>
        <img src="../img/66.jpg" style="height:200px;"/>
        <img src="../img/77.jpg" style="height:200px;"/>
        <img src="../img/88.jpg" style="height:200px;"/>
        <img src="../img/99.jpg" style="height:200px;"/>
    </marquee>
</div>

 

  • 5
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值