HTML之marquee(文字滚动)详解_html/css_WEB-ITnose
以下是一个最简单的例子:
代码如下:
下面这两个事件经常用到:
onMouseOut="this.start()" :用来设置鼠标移出该区域时继续滚动
onMouseOver="this.stop()":用来设置鼠标移入该区域时停止滚动
代码如下:
这是一个完整的例子:
代码如下:
这是一个完整的例子
该标签支持的属性多达11个:
align
设定
absbottom:绝对底部对齐(与g、p等字母的最下端对齐)
absmiddle:绝对*对齐
baseline:底线对齐
bottom:底部对齐(默认)
left:左对齐
middle:中间对齐
right:右对齐
texttop:顶线对齐
top:顶部对齐
代码如下:
behavior
设定滚动的方式:
alternate: 表示在两端之间来回滚动。
scroll: 表示由一端滚动到另一端,会重复。
slide: 表示由一端滚动到另一端,不会重复。
代码如下:
bgcolor
设定活动字幕的背景颜色,背景颜色可用RGB、16进制值的格式或颜色名称来设定。
代码如下:
direction
设定活动字幕的滚动方向
代码如下:
height
设定活动字幕的高度
代码如下:
width
设定活动字幕的宽度
代码如下:
hspace
设定活动字幕里所在的位置距离父容器水平边框的距离
This controls the horizontal(水平)space around the display box.
代码如下:
vspace
设定活动字幕里所在的位置距离父容器垂直边框的距离
This controls the vertical(垂直) space around the display box.
代码如下:
loop
设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1
代码如下:
scrollamount
设定活动字幕的滚动速度,单位pixels
代码如下:
scrolldelay
设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒)
值大了会有一步一停顿的效果
代码如下:
移动属性的设置 ,这种移动不仅仅局限于文字,也可以应用于图片,表格等等
鼠标属性
onMouseOut=this.start() ........鼠标移出状态滚动
onMouseOver=this.stop() .........鼠标经过时停止滚动
方向
方式
循环
速度
延时
外观(Layout)设置
对齐方式(Align)
底色
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
面积
空白
(Margins)
marquee的滚动属性参数 | |
从结束,其中有很多参数,其实,朋友们还是应用得很多了,让图片滚动起来,也是经常经常应用的,下面对这个网页参数的属性做一些简单的描述; 滚动参数: 1:方向:DIRECTION left---左(默认) right---右 up------上 down----下 2:方式:BEHAVIOR SCROLL -------环绕滚动(默认) SLIDE---------滚动一次 ALTERNATE-----来回滚动 3:次数:LOOP 当LOOP=-1或LOOP=INFINITE时,则表明文字滚动是无限循环(默认) 4:速度:SCROLLDELAY 任意自然整数 5:对齐:ALIGN TOP---------对齐上方 MIDDLE------对齐中部 BOTTOM------对齐下方 6:鼠标的划过与离开 onMouseOver=this.stop(); onMouseOut=this.start(); 划过停止滚动。离开,继续滚动 有了以上参数。我们就很容易制作出一个logo图片的任意滚动方式,例如: 很容易对照出。这是一个滚动速度为120MM,从下到上碰壁即返回并对齐中间,鼠标划过图标即停止,点击图标进入〈千娇论坛〉的一个来回滚动的代码。 在背景图片上做滚动字幕
参数设置: a)scrollAmount表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好 b)scrollDelay也是用来控制速度的,表示走走停停,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。 c)direction很明显是表示滚动的方向,默认为从右向左:←,因此如果是向左滚动的话不需要次参数。其他可选的值还有right,down,up。滚动方向分别为:right表示→,up表示↑,down表示↓。 d)width和height用来表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。 e)behavior是来控制滚动属性的,默认为循环滚动(scroll),同样,如果是循环滚动的话可以不需要此参数。其他可选的值还有alternate(交替滚动),slide(幻灯片效果,指的是滚动一次,然后停止滚动)。 f)每行字的前后和用定义每行字的颜色,大小和字体,如果哪项不需要的话,把代码去掉就行。 |
图片滚动
用的语句。并且要注意图片名不要中文,要注意区分英文大小写。
图片做超链接
用和把包围,并且img必须设border=0,否则图片会出现蓝框。
正确的例子如:
其中a href=表示超链接,这是最常用的。练习的方法也很简单,就是平时用FP或DW做网页的时候,要多查看源代码。
多张图片排列滚动
通常图片和图片之间用
(回行)或
(精确调整图片间的距离)来链接。也可以把你的图片先用表格排版,然后把这个表格的所有语句也加入到marquee中,让这个表格来滚动。
代码如:
上一篇: 用CSS固定footer在底部的疑问?
下一篇: 世界最昂贵物质排行榜,黄金只能垫底
推荐阅读
-
HTML滚动字幕代码及参数详解_html/css_WEB-ITnose
-
HTML之marquee(文字滚动)详解_html/css_WEB-ITnose
-
React Native 之 flexbox 布局详解篇 (清晰明了)_html/css_WEB-ITnose
-
详解用CSS3制作圆形滚动进度条动画效果_html/css_WEB-ITnose
-
IE8下滚动图片下面的文字错位,跑到图片的上面,IE6,7,FF显示正常_html/css_WEB-ITnose
-
CSS定位之position详解_html/css_WEB-ITnose
-
详解用CSS3制作圆形滚动进度条动画效果_html/css_WEB-ITnose
-
【学习笔记之CSS+DIV】CSS文字_html/css_WEB-ITnose
-
CSS2.1SPEC:视觉格式化模型之width属性详解(下)_html/css_WEB-ITnose
-
React Native 之 flexbox 布局详解篇 (清晰明了)_html/css_WEB-ITnose