html实现文字滚动效果

  • marquee标签
<marquee></marquee>
//例
<marquee  align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">hello worid!</marquee>
  • 事件
onMouseOut="this.start()" //用来设置鼠标移出该区域时继续滚动
onMouseOver="this.stop()" //用来设置鼠标移入该区域时停止滚动
  • 属性
1.滚动方向属性 direction
该属性的滚动方向可以设置四个值:up(文字向上)、down(文字向下)、left(文字向左)、right(文字向右)。

2.滚动方式属性 behavior
该属性的取值有三个值:scroll(循环滚动,默认效果)、slide(只滚动一次就停止)、alternate(来回交替进行滚动)

3.滚动速度属性 scrollamount
该属性能调整文字滚动的速度,滚动文字的速度实际上是通过设置滚动文字每次移动的长度来实现的,以像素为单位。值只写数字,不带px单位,若带了单位则设置无效。

4.滚动延迟属性 scrolldelay
该属性用来设置滚动文字滚动的时间间隔(滚动两步之间的时间间隔)。
scrolldelay的时间间隔单位是毫秒,取值只写数字

5.滚动循环属性 loop
设置滚动文字后,默认会无限循环下去,若想控制循环的次数,可设置此属性。

6.滚动范围属性 width&height
若想控制文字滚动的范围,则可起用这二属性,以像素为单位,不写px单位。默认情况下left和right滚动的width和浏览器窗口同宽,搞定和文字高度同高。up和down时height为浏览器窗口高度的三分之一。

7.滚动背景颜色属性 bgcolor
此属性为滚动区域设置背景色(取值为十六进制颜色码和英文)8.滚动空间属性 hspace&vspace
hsapce属性可以设置滚动范围的水平位置,vspace用来设置滚动范围的垂直位置。单位均为像素,写值时不写单位px。  

9.align(设定<marquee>标签内容的对齐方式)
absbottom:绝对底部对齐(与g、p等字母的最下端对齐)
absmiddle:绝对中央对齐
baseline:底线对齐
bottom:底部对齐(默认)
left:左对齐
middle:中间对齐
right:右对齐
texttop:顶线对齐
top:顶部对齐
  • 一款重点解决移动端(已支持 PC)各种滚动场景需求的插件

你可能感兴趣的:(html--css,html,css)