Html——Marquee标签【滚动效果】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滚动练习</title>
</head>
<body>
<marquee direction="up" scrollamount="5" behavior="scroll" width="190" height="140" onmouseover="this.stop()" onmouseout="this.start()" >
<p><h2><a href="Click'>http://www.baidu.com">Click to Baidu </a></h2>
<p><h2><a href="Click'>http://www.baidu.com">Click to Baidu </a></h2>
<p><h2><a href="Click'>http://www.baidu.com">Click to Baidu </a></h2>
<p><h2><a href="Click'>http://www.baidu.com">Click to Baidu </a></h2>
<p><h2><a href="Click'>http://www.baidu.com">Click to Baidu </a></h2>
</marquee>
</body>
</html>
marquee参数:
BGColor:滚动文本框的背景颜色。
Direction:滚动方向设置,可选择Left、Right、up和down。
scrolldelay:每轮滚动之间的延迟时间,越大越慢。
scrollamount:一次滚动总的时间量,数字越小滚动越慢。
Behaviour:滚动方式设置,Scroll(循环滚动)lide(单次滚动)、Alternate(来回滚动)。
Align:文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
Width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in Pixels(按像素)或in Percent(按百分比)。
Height:滚动文本框的高度,输入一个数值后从后面的单选框选择in Pixels(按像素)或in Percent(按百分比)。
loop:滚动次数。默认为infinite
hspace、vspace:前后、上下的空行。
1.建立第一个滚动字幕。代码:
<marquee scrollAmount=2 width=300>靓丽风景线</marquee>
效果如:靓丽风景线
2.各参数详解:
a)scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好。
b)width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。
c)direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。
d)scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。
e)behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)
3.实例:
a)如何给滚动字幕加超链接?这跟平时的超链接是完全一样的。只要在文字外面加上<a href=***>和</a>就可以了。如下效果,代码是<marquee scrollAmount=2 width=300><a href=http://www.cctv.com>中央电视台</a></marquee>,点击中央电视台就可以进入了
b)如何制作当鼠标停留在文字上,文字停止滚动?
代码如:
<marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>文字内容</marquee>
效果如:
文字内容
c)交替效果。代码如:
<marquee scrollAmount=2 width=99 behavior=alternate>文字内容</marquee>
效果如:
文字内容
d)多行文本向上滚动。代码如:
<marquee scrollAmount=2 width=300 height=160 direction=up>·早晨好啊!<br>·空气好清新啊<br>·你还好吗<p>·<a href=http://www.cctv.com>靓丽风景线</a></marquee>
效果如:
·早晨好啊!
·空气好清新啊
·你还好吗
·靓丽风景线
分享到:
相关推荐
HTML标签marquee实现滚动效果,实现文字在网页中漂移的代码。
一个不错的字母滚动控件,可上下、左右,可改变字体
下面小编就为大家带来一篇HTML标签marquee实现滚动效果的简单方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
NULL 博文链接:https://gsllong.iteye.com/blog/1096116
主要介绍了JS与HTML结合使用marquee标签实现无缝滚动效果代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
marquee效果
经典的通过Marquee标签来控制滚动有许多不尽人意的地方,这一点想必略通网页设计的人都知道。鄙人上传的此脚本(含Demo)是一个Marquee类,开放了几个接口轻松实现滚动的方向、延时、尺寸等参数的设置,对从事网页...
<marquee>标签,它是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。...但无意中发现了一个html标签——<marquee></marquee>可以实现多种滚动效果,无需js控制。使用marqu
MARQUEE属性与用法,能实现无缝循环滚动文字,上下,左右都可以
公告滚动动画,从右到左滚动,marquee标签效果
jQuery 模拟 Marquee 无缝滚动 不间断滚动
使用js实现了ie的marquee标签滚动功能, 使之能兼容FF,ie 并修正了纯中文横向滚动时的bug..
页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 – <marquee></marquee>可以实现多种滚动效果,无需js控制。 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:...
无缝循环marquee滚动JS代码实现,兼容IE, FireFox, Chrome,供大家参考,具体内容如下 首先是CSS和HTML如下: #marquee_zxd { border: 1px solid red; white-space: nowrap; overflow: hidden; width: 500px; ...
marquee标签实例
滚动效果的源代码,有间歇性滚动和无缝滚动,间歇性滚动式指隔几秒滚动一次,而无缝滚动则没有停留,但是有鼠标悬停时停止滚动,鼠标移开则继续滚动。
JSmarquee滚动效果,marquee标签不推荐使用
marquee.js插件演示9种jQuery滚动效果