标签之美六——滚动字幕的应用

标签之美——滚动字幕的应用

在网页中,我们经常可以看到一些滚动出现的字幕,按钮等内容。滚动字幕的应用会使网页的内容更加生动紧凑。

1、滚动标签<marquee></marquee>

将滚动显示的文字放在这个标签内,就可以实现滚动字幕。这个标签有一个behavior属性,可以设置滚动方式:

scroll:循环滚动,默认的滚动方式

slide:只滚动一次

alternate:左右来回滚动

2、设置字幕背景颜色

?


1

2

3

<body>

<marquee behavior="alternate" bgcolor="#F4070B">这里是滚动字幕</marquee>

</body>

3、设置字幕滚动方向:direction属性,可以设置的值有:left,right,up,down。分别表示从右向左滚动,从左向右滚动,从下向上滚动,从上向下滚动。

4、设置字幕的滚动速度

通过设置scrollamount属性来更改字幕的滚动速度,数值越大,速度越快。

5、设置字幕滚动时间间隔

scrolldelay可以来设置字幕的停顿时间间隔,单位是毫秒。效果和速度属性相似。

6、设置滚动次数

loop属性可以设置滚动次数,-1则为循环滚动。

7、设置鼠标滑过时停止滚动,移开时继续滚动:

?


1

2

3

<body>

<marquee direction="down" onMouseOver="this.stop()" onMouseOut="this.start()">这里是滚动字幕</marquee>

</body>

滚动字幕也支持图片的滚动,将文字换位图片即可。

时间: 2024-12-22 00:53:24

标签之美六——滚动字幕的应用的相关文章

使用Javascript制作连续滚动字幕

javascript 我们一般都用Marquee标签控制元素的滚动.但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白.而下面介绍中的滚动则是连续的,毫不间断. 下面为你介绍这是如何实现的. 为了滚动能够"连续",我们需要将字幕的内容复制多遍,直到内容的高度不小于滚 动区高度的两倍.然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动).当滚动条滚动到最下方时,理论上不能再往下滚动了,于是我们立刻调整滚动条,将它向上滚动到一个和当前画面一样的位置

Dreamweaver MX 2004高级技巧(2)滚动字幕

dreamweaver|高级|技巧 在网页中,制作滚动字幕使用marquee标签,如果用手写的方法,实在是太麻烦了.从Dreamweaver MX 2004开始,可以使用"标签选择器"插入各种标签,并且可以使用"标签检查器"设置标签的属性值,它的功能类似于属性面板,但是比属性面板更强大. 使用"标签选择器"插入marquee标签 1.把光标插入点放在需要插入滚动字幕的地方. 2.点击插入面板的"标签选择器 " 3.选择 mar

用DW8学习网页滚动字幕的制作

在网页中,制作滚动字幕使用marquee标签,如果用手写的方法,实在是太麻烦了.推荐利用网页制作软件比如Dreamweaver来学习.在DW中可以使用"标签选择器"插入各种标签,并且可以使用"标签检查器"设置标签的属性值,它的功能类似于属性面板,但是比属性面板更强大. 使用"标签选择器"插入marquee标签 1.把光标插入点放在需要插入滚动字幕的地方. 2.点击插入面板的"标签选择器 " 3.选择 marquee标签,点击&

iOS实现滚动字幕的动画特效_IOS

效果图 开始上代码 滚动字幕的原理是用timer定时器间隔一定的时间来驱动scrollView上的内容偏移,来实现滚动的效果,原理比较简单,关键是有些细节需要处理好,实现流畅效果的同时要考虑到性能优化 这里是.h文件的接口方法及属性,可适应大部分自定义场景 /*初始化*/ -(instancetype)initWithFrame:(CGRect)frame textArray:(NSArray *)textArray colorArray:(NSArray *)textColorArray; /

使用JavaScript实现连续滚动字幕效果的方法_javascript技巧

我们一般都用Marquee标签控制元素的滚动.但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白.而下面介绍中的滚动则是连续的,毫不间断. 下面为你介绍这是如何实现的. 为了滚动能够"连续",我们需要将字幕的内容复制多遍,直到内容的高度不小于滚动区高度的两倍.然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动).当滚动条滚动到最下方时,理论上不能再往下滚动了,于是我们立刻调整滚动条,将它向上滚动到一个和当前画面一样的位置.结果我们看到的就是连续

会声会影如何制作滚动字幕,会声会影制作滚动字幕教程

视频制作完成后我们往往会涉及到个声音进行配字,在这种情况下就经常会用到滚动字幕,下面小编就来分享一下如何通过会声会影给影片添加滚动字幕. 1.打开会声会影视频编辑软件,点击标题的图标,在预览窗口会出现"双击这里可以添加标题"的字样,在此处双击,输入要添加的文字内容.   图一:添加文字 2.在右面的"编辑"面板中,设置字体为"楷体",字号为"40",文字颜色选择"黄色".   图二:设置文字格式 3.接下来

标签之美三——超链接的嵌入

标签之美--超链接标签 一.创建超链接 通常的超链接有两种方式,一种是链接到另一个文件,另一种是链接到当前文件的某个位置.这两种方式都是通过<a></a>标签来创建,其中href属性用来指定链接的目标地址. 1.链接到当前页面指定位置 被链接的地方需要使用<a>标签的name属性标记,示例如下: ? 1 2 3 4 <a href="#last">链接到本页最后</a><!--创建一个超链接--> <br&g

标签之美五——网页表格的设计

标签之美--网页表格的使用 通过表格,可以使网页排版更加清晰,形式更加简洁漂亮. 一.表格布局中三个重要的标签 1.<table></table>:表格的开始和结束标签,行列的布局都在<table>标签内. 2.<tr></tr>行标签的开始和结束 3.<tb></tb>列标签的开始和结束 行标签在列标签的外层,不能单独使用,其中必须至少有一列.示例如下: ? 1 2 3 4 5 6 7 <body> <

全面了解制作滚动字幕完全手册

内容:滚动字幕会让很多人感到兴奋,特别是第一次使用滚动字幕时,会爱不释手.滚动字幕我也做得不少了,对它也不会兴奋了,所以现在也用得不多了.有不少朋友常问到这是怎么做的,现在做一个详细的专题,让你更全面地了解一下. 滚动字幕在FrontPage的组件里有,但是FrontPage这个软件只能支持单行文字,一出现多行文字它就无能为力了,而且它只能支持一行滚动!(如果出现只能滚动一行的情况,解决办法是把这段代码嵌入到JavaScript的document.write里面,请看下面例d的详细说明)Drea