滚动图片代码 - xiugang1985@126的日志 - 网易博客

滚动图片代码 

基本格式：代码direction(属性)

 决定文本滚动方向：向左=ieft     向右=right  

                                       向上 = up    向下=down

                                mar quee behavior=scroll>一圈一圈地滚动

                                marquee behaviro=slide>只滚动一次就停止

滚动图片代码语法及使用:

例如下

<marquee behavior="scroll" direction="left" loop="infinite" scrollamount="3" onmouseover='this.stop()' onmouseout='this.start()'>

<img src="../../../xiyuan/img/i-meihua/xm-02.jpg" width="100" height="75">

<img src="../../../xiyuan/img/i-meihua/xm-04.jpg" width="100" height="75">

<img src="../../../xiyuan/img/i-meihua/xm-05.jpg" width="100" height="75">

<img src="../../../xiyuan/img/i-meihua/xm-08.jpg" width="100" height="75">

<img src="../../../xiyuan/img/i-meihua/xm-09.jpg" width="100" height="75">

<img src="../../../xiyuan/img/i-meihua/xm-13.jpg" width="100" height="75">

</marquee></td>

其中

       1、  behavior="scroll" 滚动的方式，scroll 为一圈一圈绕着走。

　　scrollAmount=3 滚动的速度，数值越大，速度越快，反之则慢。

　　direction=left 滚动的方向 left 是由右向左。

　　onmouseover='this.stop()' 有止停功能，this.stop() 鼠标放上就停止。

　　onmouseout='this.start()' 有止停功能，this.start() 鼠标离开就滚动

     2、  <img src="../../../xiyuan/img/i-meihua/xm-02.jpg"

　　"../../../xiyuan/img/i-meihua/xm-02.jpg" 照片在本网中的位置，

　　xiyuan/img/i-meihua 在本网的文件夹中，

　　xm-02.jpg 照片名称及格式。

    3、 width="100" height="75">

　　width="100" 照片的宽度为100像素值。

　　height="75" 高度为75像素值。

　4、如需要多设可将 <img src="../../../xiyuan/img/i-meihua/xm-02.jpg" width="100" height="75"> 这一行进行复制，放在 </marquee></td> 前面即可。

 

立体式滚动图片的代码

<P><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.qq7b.com/qq/5.5.swf?p1=http://在此加图片.jpg&p2=http://在此加图片.jpg&p3=http://在此加图片.jpg&p4=http://在此加图片.jpg&p5=http://在此加图片.jpg&p6=http://在此加图片.jpg& width=610 height=238 type=application/x-shockwave-flash type?100%? autostart="0" quality="high" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"></P>

<P> </P>

 

   卷帘式滚动图片的代码及效果

1、一般滚动图的头尾中间有断隙,一个巡环后等于从头另来,断续感影响画面完整，下面介绍的代码可消除间隙,改动代码方向及排续可产生不同效果,掌握其原理后的运用在自己。

代码:

<TABLE height=450 cellPadding=0 width=600 background=图片地址 border=0>

<TBODY>

<TR>

<TD>

<DIV>

<MARQUEE scrollAmount=4 direction=down width=600 height=450>

<MARQUEE scrollAmount=4 direction=up width=600 height=450><IMG style="FILTER: alpha WIDTH: 600px; HEIGHT: 450px" height=450 src="图片地址" width=600></MARQUEE></MARQUEE>

 </TD></TR></TBODY></TABLE>

说明:  按以下代码可改变卷帘方向产生不同效果:

       向下: direction=up向上: direction=down 向左: direction=right 向右: direction=left

 

附图框代码:    <TABLE height=10 cellSpacing=5 borderColorDark=#54461c cellPadding=0 width=10 borderColorLight=#a89a6f background=http://image4.360doc.com/DownloadImg/2009/8/20/235219_5089880_1.jpg border=3 ORDERCOLOR="white">

<TBODY><TR><TD>此处添加图片代码<CENTER></CENTER>

附添加文字标题的链接代码: 

<DIV style="MARGIN-BOTTOM: 5px"><SPAN style="FONT-SIZE: 120%"><A href="http://lv.jingxiang.blog.163.com/edit/" target=_blank><FONT face=华文彩云 color=#FFCC00 size=5>此处添加所需要的文字</FONT></A></SPAN></DIV>

2、<DIV align=center>

<TABLE cellSpacing=10 borderColorDark=#000080 cellPadding=0 width=485 align=center borderColorLight=#000080 background=http://image4.360doc.com/DownloadImg/2009/8/20/235219_5089880_2.gif border=0>

<TBODY>

<TR>

<TD width="100%">

<CENTER>

<TABLE cellSpacing=30 cellPadding=0 width="100%" background=http://image4.360doc.com/DownloadImg/2009/8/20/235219_5089880_3.jpg border=0>

<TBODY>

<TR>

<TD width="100%">

<DIV align=center>

<TABLE cellSpacing=10 borderColorDark=#000080 cellPadding=0 width="100%" borderColorLight=#000080 background=http://image4.360doc.com/DownloadImg/2009/8/20/235219_5089880_2.gif border=0>

<TBODY>

<TR>

<TD align=middle width="100%" background=http://www.hmczj.com.cn/xianhua/1/XH138.jpg border="0"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer align=right src=http://bbs.flasher123.com/UploadFile/2004-5/20045912435828355.swf width=475 height=330 type=application/x-shockwave-flash quality="high" wmode="transparent"><EMBED align=right src=http://wanruo.jahee.com/jpsc/flash/5.swf width=475 height=330 type=application/octet-stream quality="high" wmode="transparent">

<CENTER>

<MARQUEE scrollAmount=2 direction=up width=475 height=329>

<CENTER>

<TABLE borderColor=#e4dc9b height=329 cellSpacing=5 width=480 background=http://img.blog.163.com/photo/_cMapZSUsehi3Q4_W0d0cA==/3683100070259045704.jpg border=0>

<TBODY>

<TR>

<TD></TD></TR></TBODY></TABLE></CENTER>

<CENTER>

<TABLE borderColor=#e4dc9b height=329 cellSpacing=5 width=485 background=http://www.hmczj.com.cn/xianhua/1/XH114.jpg border=0>

<TBODY>

<TR>

<TD></TD></TR></TBODY></TABLE></CENTER>

<CENTER>

<TABLE borderColor=#e4dc9b height=329 cellSpacing=5 width=485 background=http://www.hmczj.com.cn/xianhua/1/XH121.jpg border=0>

<TBODY>

<TR>

<TD></TD></TR></TBODY></TABLE></CENTER>

<CENTER>

<TABLE borderColor=#e4dc9b height=329 cellSpacing=5 width=485 background=http://www.hmczj.com.cn/xianhua/1/XH126.jpg border=0>

<TBODY>

<TR>

<TD></TD></TR></TBODY></TABLE></CENTER>

<CENTER>

<TABLE borderColor=#e4dc9b height=329 cellSpacing=5 width=485 background=http://www.hmczj.com.cn/xianhua/1/XH150.jpg border=0>

<TBODY>

<TR>

<TD></TD></TR></TBODY></TABLE></CENTER>

<DIV></DIV>

<P></P>

 

一上一下滚动图片特效代码：

<MARQUEE direction=right behavior=alternate>

<MARQUEE width=120 direction=up behavior=alternate height=400><FONT face=华文行楷 color=#0000ff size=4><B>快来看哟！</B></FONT><BR><A href="http://oyjzen.go.51.net/home.htm" target=_blank><IMG src="http://img.blog.163.com/photo/j_GkRKne1y3H4rosFA4_uA==/2571273912251890222.jpg"></A></MARQUEE></MARQUEE></MARQU>

 

由中间向两边移动的文字和图像

代码：

<P align=center> </P>

<P align=center><FONT face=华文彩云 color=#ee110e size=5>

<MARQUEE width=200 height=50><IMG style="CURSOR: pointer" src="http://www.rmloho.com/user6/42531/upload/2008983759.gif" >由中间向两边移动的文字和图像 </FONT></MARQUEE><FONT face=华文彩云 color=#ee110e size=5><FONT face=华文彩云 color=#ee1111 size=5>

<MARQUEE direction=right width=200 height=50>由中间向两边移动的文字和图像<IMG style="CURSOR: pointer" src="http://www.rmloho.com/user6/42531/upload/2008987066.gif" ></FONT></MARQUEE></FONT></FONT></P></FONT>

中间相对上下移动：

1、代码：

<marquee direction=up scrollamount=3 src=http://myok.blogchina.com/inc/myoklogo.gif width=90></marquee></center><marquee direction=down scrollamount=3><center><div style="width:400;filter:flipv;"><img src="//myok.blogchina.com/inc/myoklogo.gif" width=90></div></center></marquee>

2、代码

<CENTER>

<MARQUEE direction=down width=220 height=100><IMG style="WIDTH: 90px; HEIGHT: 208px" src="//img.blog.163.com/photo/57fhncsxewKGoyP-namcjQ==/5348306032479338029.jpg" width=90></MARQUEE></CENTER>

<CENTER>

<MARQUEE direction=up width=220 height=100><IMG style="LEFT: 163px; WIDTH: 90px; HEIGHT: 208px" src="//img.blog.163.com/photo/8RPzV40AaviDzSNEtrAALQ==/1446499905316285735.jpg" width=90></MARQUEE></CENTER>

 

 中间向两边移动：

<CENTER><BR>

<MARQUEE width=220 height=200><IMG style="WIDTH: 90px; HEIGHT: 196px" src="//img.blog.163.com/photo/8RPzV40AaviDzSNEtrAALQ==/1446499905316285735.jpg" width=90></MARQUEE>

<MARQUEE direction=right width=220 height=200><IMG style="WIDTH: 90px; HEIGHT: 208px" src="//img.blog.163.com/photo/57fhncsxewKGoyP-namcjQ==/5348306032479338029.jpg" width=90></MARQUEE></CENTER>

 滚动图片效果一：