html css 实现上下左右字幕滚动

本文主要是介绍html css 实现上下左右字幕滚动，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

代码实例：http://github.crmeb.net/u/defu

marquee的基本语法： … ,与大多数HTML语法元素一样，它也是成双出现的，被修饰对象就放在起始符和终止符之间。而且它自己可以实现鼠标悬停的效果，下面解释一下各参数的含义：

align：是设定活动字幕的位置，除了居左、居中、居右三种位置外，又增加靠上（top）和靠下（bottom）两种位置。

Bgcolor：用于设定活动字幕的背景颜色，可以使用英文的单词也可以是十六进制数的。

Direction：用于设定活动字幕的滚动方向是向左（left）、向右（right）、向上（up）、向下（down）。

Behavior：用于设定滚动的方式，主要由三种方式：

 behavior=”scroll”表示由一端滚动到另一端；

 behavior=”slide”:表示由一端快速滑动到另一端，且不再重复；

 behavior=”alternate”表示在两端之间来回滚动。

Height：用于设定滚动字幕的高度。

Width：则设定滚动字幕的宽度。

Hspace和vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度。

Scrollamount：用于设定活动字幕的滚动距离。数值越小，滚动的速度就越快。

scrolldelay：用于设定滚动两次之间的延迟时间，数值越小，间隔就越小。

Loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。其中默认情况是向左滚动无限次，字幕高度是文本高度；滚动范围：水平滚动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。

onmouseover: 用于设定鼠标移动到marquee块上执行的操作。

onmouseout: 用于设定鼠标从marquee块上移出后执行的操作。

闲话不说，举个例子:

<marquee> 啦啦啦，真的会动耶！</marquee>

啦啦啦，真的会动耶！

瞧，简单吧？不过，以上例子只是使用了marquee的默认用法。我们加入相应的参数，它的移动方法就有所不同了。

参数一：direction

direction的英文意思就是方向。这个参数的取值有四个：left（左)、right(右)、up(上)、down(下)。

例：<marquee direction=up>向上移动</marquee>

向上移动

参数二：behavior

移动方式。值：scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。

例：<marquee direction=left behavior=alternate>哈哈，我来回走！</marquee>

哈哈，我来回走！

<marquee direction=left behavior=slide>累！我只走一次！</marquee>

vior=slide>累！我只走一次！

参数三：loop

循环。若未指定则循环不止(infinite)，其值取数值。例：

<marquee loop=3>我只走三次哦</marquee>

我只走三次哦

参数四：scrollamount

移动速度。值取正整数。数值越大，速度越快。例：

<marquee scrollamount=25>看，我走多快！</marquee>

看，我走多快！

参数五：scrolldelay

延时。数值。例：

<marquee scrolldelay=1000>我走一走，停一停</marquee>

我走一走，停一停

参数六：bgcolor

底色。例：<marquee bgcolor=pink>看到了吧？有底色！</marquee>

看到了吧？有底色！

参数七：width和height

就是移动的宽度与高度了。例：

<marquee width=200 height=200 bgcolor=pink direction=down>这个面积不够我移动！</marquee>

这个面积不够我移动！

其他参数：

空白(Margins)<hspace=数值 vspace=数值>

对齐方式(Align) <align=top/ middle/bottom>

最后在介绍一个鼠标悬停的效果：http://github.crmeb.net/u/defu

这篇关于html css 实现上下左右字幕滚动的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！