美文网首页程序员让前端飞
好神奇,不用js也能是实现滚动效果

好神奇,不用js也能是实现滚动效果

作者: jia林 | 来源:发表于2017-09-26 23:09 被阅读0次

最近一段时间由于重构了一个项目,一直没时间进行更新,是时候冒个泡了!今天偶然发现一好玩的标签,和大家分享一下!

  • marquee标签,创建一个滚动的文本字幕,应用于文字、图片、今天才知道,基础知识有待提高!

文字朝上滚动

<marquee direction=up behavior=scroll loop=3 scrollamount=10 scrolldelay=4 bgcolor=#ccc height=150 width=15% hspace=4 vspace=4><P align=center>朝上滚动</P></marquee>

marquee标签属性详解

  • direction属性
属性参数值 示例代码
direction="left"向左(默认值) <marquee direction="left">向左滚动</marquee>
direction="up"向上 <marquee direction="up">向上滚动</marquee>
direction="right"向右 <marquee direction="right">向右滚动</marquee>
direction="down"向下 <marquee direction="down">向下滚动</marquee>
  • behavior属性
属性参数值 示例代码
behavior="alternate"来回滚动 <marquee behavior="alternate">来回滚动</marquee>
behavior="scroll"单方向循环滚动 <marquee behavior="scroll">单方向循环滚动</marquee>
behavior="slide"只滚动一次 <marquee behavior="slide">只滚动一次</marquee>

-loop属性

属性参数值 示例代码
loop="2"滚动2次 <marquee loop="2">我滚动2次。</marquee>
bloop="infinite"无限循环滚动 <<marquee loop="infinite">无限循环滚动。</marquee>
loop="-1"无限循环滚动 <marquee loop="-1">无限循环滚动。</marquee>
  • scrollamount速度属性
属性参数值 示例代码
scrollamount="50"速度慢了些 <marquee scrollamount="50">慢了些。</marquee>
scrollamount="100"速度很快 <marquee scrollamount="100">速度很快</marquee>
  • scrolldelay延时属性
属性参数值 示例代码
scrolldelay="30"小步前进 <marquee scrolldelay="30">小步前进。</marquee>
scrolldelay="1000"大步前进 <marquee scrolldelay="1000" scrollamount="100">大步前进。</marquee>

常用的就这些 ,同样支持width、height等属性。。。

相关文章

网友评论

    本文标题:好神奇,不用js也能是实现滚动效果

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