標籤：

滾動圖片代碼　 - xiugang1985@126的日誌 - 網易博客

06-11

滾動圖片代碼

基本格式：代碼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&amp;p2=http://在此加圖片.jpg&amp;p3=http://在此加圖片.jpg&amp;p4=http://在此加圖片.jpg&amp;p5=http://在此加圖片.jpg&amp;p6=http://在此加圖片.jpg&amp; width_=610 height=238 type=application/x-shockwave-flash type?100%? autostart="0" quality="high" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"></P>

<P>&nbsp;</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 >

<CENTER>

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

<TBODY>

<TR>

<TD >

<DIV align=center>

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

<TBODY>

<TR>

<TD align=middle 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="https://www.getit01.com/getimg_360.php?url=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="https://www.getit01.com/getimg_360.php?url=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="https://www.getit01.com/getimg_360.php?url=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="https://www.getit01.com/getimg_360.php?url=http://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="https://www.getit01.com/getimg_360.php?url=http://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="https://www.getit01.com/getimg_360.php?url=http://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="https://www.getit01.com/getimg_360.php?url=http://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="https://www.getit01.com/getimg_360.php?url=http://img.blog.163.com/photo/57fhncsxewKGoyP-namcjQ==/5348306032479338029.jpg" width_=90></MARQUEE></CENTER>

滾動圖片效果一：


推薦閱讀：

※哪些公知的博客值得每篇都看？
※家居裝修行業，誰在用博客悄悄賺錢
※筆戈科技的預熱是怎麼把讀者預期玩壞的？
※時辰干支查算表 - 世世清白的日誌 - 網易博客
※網易博客的留言圖案

TAG:圖片 | 代碼 | 網易 | 博客 | 網易博客 | 日誌 | 動圖 |