视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
舞动你的文字巧用html中marquee属性
2020-11-27 14:45:21 责编:小采
文档


语法:<marquee> …</marquee>

  使用移动属性marquee,不仅仅可以舞动你的文字,还可以应用于图片,表格等等。

  <marquee direction=left>欢迎光临科讯青年学习频道!</marquee>

  direction=left,表示方向。上面文字效果是“欢迎光临科讯青年学习频道!”从右向左移动!另外,方向还有right,up,down。

  除了方向,我们还可以添加其他的元素:

  移动的方式:

  循环移动:loop=n(n,表示次数)   绕圈移动:behavior=scroll   只走一次:behavior=slide   来回移动:behavior=alternate

  外观:

  字号:<font size=n>(n,变量)   对齐方式:align=top/middle/bottom   底色:bgcolor=Blue(预定义色彩,如:Black,Olive,Teal,Red,Blue,Maroon, Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua或16进制数码)

  其它:

  速度:scrollamount=n(n,变量)   延时:scrolldelay==n(n,变量)

<marquee direction="向什么方向移动" height="移动区域高度" width="移动区域宽度" scrollamount="移动速度" onmouseover=this.stop() onmouseout=this.start()>"

onmouseover 设置鼠标放在移动区域的时候暂停移动

onmouseout 鼠标离开的时候继续滚动

用marquee代码来实现文字的滚动与图片的滚

今天在TAP知道那里看到滚动文字的设置了!好像是以前都不支持的。可能是我没有用过吧!呵呵 给大家看下效果吧!

如下来自TAP知道的上下滚动文字公告栏 的代码解释

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:前后、上下的空行。

下面的演示是我的公告栏演示:效果你可以看右下角啊!喜欢的话!通过上面的代码解释代入看看效果了!

效果一:文字向上滚动


代码如下:
<marquee direction="up" loop="-1" scrollamount="4">
<div align="left">
</div><center>
<font color="#008000"></font></center><div align="left">
</div><center><p><font color="#ff6600">本站公告</font></p>
<p><font color="#ff4500">欢迎来到小军资源</font></p>
<p><font color="#ff4500">在此与你分享各个最新的免费资源与资讯,</font></p>
<p><font color="#ff4500">希望你的喜欢,你的支持是我最大的动力!</font></p>
<p><font color="#ff4500">如有什么建议一定得说出来!</font></p>
<p><font color="#ff4500">本站资源来自网络,如对你造成侵权!</font></p>
<p><font color="#ff4500"></font></p>
<font color="#ff4500"><p><font color="#ff3300">谢谢你的支持,小军因你而精彩</font>

</p></font></center><font color="#ff4500"></font></marquee>

效果二:文字往左边滚动

<marquee direction="left" loop="-1">[公告]部分教程为Tap知道原创,转载请注明出处!</marquee>

图片滚动的代码:


代码如下:
<marquee direction="lift" loop="-1" scrollamount="20" width="500" height="210">
<a href="http://jun51.tap.cn/" target="_blank"><img height="200" width="300" src="http://img011.photo.21cn.com/photos/mark/20110410/m620x800/CC6169D8EE67719C4299B0740123325E.jpg"/><img height="200" width="300" src="http://img011.photo.21cn.com/photos/mark/20110410/m620x800/EB965C39B9A8B63AE3908267DD6C45C8.jpg"/><img height="200" width="300" src="http://img003.photo.21cn.com/photos/mark/20080517/m620x800/676E5C63EA319EEABCCB6D03C19121D4.jpg"/>
</marquee>

想要多少你就加多少吧!不过好像有的浏览显示时的效果的了! 建议用谷歌啊 这样效果好的!

下载本文
显示全文
专题