您好!欢迎您光临关于移动的运用(随缘) _迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>网络课堂>>>HTML讲座>>>关于移动的运用(随缘)
关于移动的运用(随缘)
发表日期:2007/9/4 23:36:00 出处:海洋之心 作者:随缘 发布人:hsb345 已被访问 1746

HTML语言基础

关于移动的运用

编写:随缘

   前面我们学习了边框的制作和图片网页的制作,但是仅仅有这些还不能很好的展示作者心中所想表达的意境,有时我们还需让文字及图片动起来,以丰富你作品的内涵,插入适当的移动效果会让你的作品更加锦上添花。这就接触到移动的运用了,下面我们就讲讲移动的基本语法。首先我们先看看移动的几种展示效果:

1.从上往下的移动:

我从上向下移

代码:<MARQUEE scrollAmount=5 direction=down>
<CENTER><STRONG><FONT color=#ff4500><FONT face=华文行楷 size=5>我从上向下移</FONT><BR></FONT></STRONG><IMG height=400 src="
http://www.shtuangou.com/exhibit/uploadpic/2006121776316550.JPG" width=350></CENTER></MARQUEE>

2.左右来回的移动:

哈哈,看我左右来回跑!

代码:<MARQUEE behavior=alternate><FONT color=#ff8c00 size=5><STRONG>

哈哈,看我左右来回跑!</STRONG></FONT><BR><IMG height=300 src="http://photo6.fotolog.net.cn/userimages/48/36/j/jz99131251/52/500

_H70KKLMc.gif" width=200></MARQUEE>

3.中间向两边跑的移动:

我往外跑啊! !啊跑外往我

代码:<P align=center>
<MARQUEE width=200 height=50><FONT style="FONT-SIZE: 30pt;

FILTER: shadow(color=ff8c00); COLOR: #ff1493; LINE-HEIGHT:

150%; FONT-FAMILY: 华文彩云"><STRONG>我往外跑啊!

</STRONG></FONT></MARQUEE>


<MARQUEE direction=right width=200 height=50><FONT style=

"FONT-SIZE: 30pt; FILTER: shadow(color=ff8c00); COLOR:

#ff1493; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><STRONG>

!啊跑外往我</STRONG></FONT></MARQUEE></P>

4.两边向中间聚的移动:

代码:<TABLE cellPadding=0 width=650 align=center border=0>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=3 scrollDelay=50 direction=right><EMBED src=http://net.hnol.net/200504/tianshi/yinhua/angelweb/1-1.swf width=320 height=320 type=application/x-shockwave-flash wmode="transparent" quality="high"></EMBED></MARQUEE></TD><TD>
<MARQUEE scrollAmount=3 scrollDelay=50><EMBED src=http://net.hnol.net/200504/tianshi/yinhua/angelweb/1-1.swf width=320 height=320 type=application/x-shockwave-flash wmode="transparent" quality="high"></EMBED></MARQUEE></TD></TR></TBODY></TABLE>

    相信朋友们都看到效果了吧,现在我们就来讲讲是什么实现了这些运动

的效果。首先,我们来认识一下移动的一些属性及参数:


MARQUEE   移动的起始代码,令文字、图片移动。

<P align=center> 表示居中

direction= 一个参数”,移动方向 : 参数有:left(左)、right(右)、

up(上)、down(下)

scrollamount=5  移动的速度。给的数值越大速度越快,可根据自己的需

要来设置。

font   文字的字体。

width  表示为宽度。放在不同的地方表示不同的作用。如是文字表示文字

的展示宽度;如是图片则表示为图片的宽度;如是flash则表示为flash的

宽度。

height  表示为高度。其作用和宽度一样。

img src= 图片起始符。等号后面加入图片的绝对地址。

loop=3  表示移动的次数,等号后面的数值根据需要自己设置。

bgcolor 表示为背景色,如(bgcolor=pink)

pink    是背景颜色

behavior 移动方式。

参数有:

scroll(循环移动)

slide(只移动一个回合)

alternate(来回移动)

scrolldelay = 100   表示延时,单位为毫秒,数值越大,停顿时间就越长。

        在平时的运用中还有很多方法,在这儿就不一一列出了,移动

不仅仅用于文字、图片,还可用于边框,朋友们可自己试试,你将会有

惊奇的发现,动动手吧。

    下面为大家提供一些经常可用的移动代码,大家可以复制粘贴到你

的编辑后台去用。具体插入的地方可根据大家的喜欢和需要去插入。但

一定要记住的是:必须插入在你网页的文字展示区域里。也就是说插在

所有边框代码最后<TD>代码的后面。这样就不会出现错码和乱码。

一、图片和文字移动的效果:           效果(一)

 欣赏移动文字图片

效果(一)的代码:

<CENTER>
<TABLE borderColor=fff000 height=350 cellSpacing=1 cellPadd

ing=10 width=450 border=3><TBODY><TR><TD bgColor=#000000>
<MARQUEE scrollAmount=3 direction=down behavior=alternate

>">
</MARQUEE></MARQUEE>
</TD></TR></TBODY></TABLE>

效果(二)
 

朋友你好,海洋之心欢迎你!
 

效果(二)的代码:

<CENTER>
<TABLE borderColor=#cccccc cellSpacing=5 cellPadding=5 width=500

align=center background="http://olq.rqsha.com/明星/1.jpg"
border=5>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=2 direction=up width=400 height=230>
<CENTER><FONT size=5 color=#003399 face="隶书"><br>朋友你好,

海洋之心欢迎你!</br></FONT></MARQUEE> </TD></TR></TBODY></TABLE>

</CENTER>

 

效果(三)
海洋之心欢迎你海洋之心欢迎你

效果(三)的代码:

双排字上下向中间移动
<P align=center><FONT style="FONT-SIZE: 30pt; WIDTH: 100%; COLOR:

red; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷"><B><EM>
海洋之心欢迎你</EM></B></FONT><FONT style="FONT-SIZE: 30pt; FILTER:

FlipV; WIDTH: 100%; COLOR: ff99ff; LINE-HEIGHT:
150%; FONT-FAMILY: 华文行楷"><B><EM>海洋之心欢迎你</EM></B></FONT></P>

 

效果(四)
 
你的家园---海洋之心
 

效果(四)的代码:

字体从右向左移动
<DIV align=center>
<MARQUEE style="WIDTH: 600px; HEIGHT: 48px" width=363 height=48>

<EM><FONT face=楷体_GB2312 color= red size=7><STRONG>
你的家园---海洋之心</STRONG></FONT></EM></MARQUEE></DIV>
<DIV align=center>&nbsp;</DIV>

 

效果(五)
 
相约海洋之心
 

效果(五)的代码:

<CENTER>
<MARQUEE scrollAmount=1 direction=up height=50>
<CENTER><FONT style="FONT-SIZE: 25pt; FILTER: shadow(color=

#FF8C00); WIDTH: 360px; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY:

华文彩云"><B>相约海洋之心</


效果(六)

 
            欢      迎     光     临 

效果(六)的代码:

字体在图案中
<P><FONT style="FONT-SIZE: 25pt; FILTER: glow(color:0000CC 22DD22,strength=50); WIDTH: 100%; COLOR: white; LINE-HEIGHT:
350%; FONT-FAMILY: 华文彩云; HEIGHT: 151px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp; 欢  
&nbsp;&nbsp; 迎  &nbsp;&nbsp; 光  &nbsp;&nbsp; 临&nbsp; </FONT></P>

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

迎客松B站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:翠柏

琼icp备09005167