1、单张图片代码： <IMG src="图片地址" height=高度 width=宽度>

效果示范：

代码复制：<P><IMG height=200 src="http://image16.360doc.com/DownloadImg/2010/10/2910/6371495_2.jpg" width=280> </P>

2、多张图片代码：

效果示范：

代码复制：<P><IMG height=120 src="http://image16.360doc.com/DownloadImg/2010/10/2910/6371495_3.jpg" width=140> <IMG height=200 src="http://img.blog.163.com/photo/oDvOVHJNWNKPWS3TnTqe8Q==/5351402257223220965.jpg" width=200><IMG height=130 src="http://image16.360doc.com/DownloadImg/2010/10/2910/6371495_4.jpg" width=120 border=0></P>

3、左右移动图片代码：<MARQUEE width=380 height=80 onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"><img src="第一张图片地址"><img src="第二张图片地址"><img src="第三张图片地址"><img src="第四张图片地址"></MARQUEE>

效果示范：

代码复制：<MARQUEE scrollAmount=4 loop=infinite width="88%" height=330 deplay="0"><IMG height=330 src="http://image16.360doc.com/DownloadImg/2010/10/2910/6371495_5.jpg" width=235><IMG height=330 src="http://image16.360doc.com/DownloadImg/2010/10/2910/6371495_6.jpg" width=235><IMG height=330 src="http://image16.360doc.com/DownloadImg/2010/10/2910/6371495_7.jpg" width=235><IMG height=330 src="http://image16.360doc.com/DownloadImg/2010/10/2910/6371495_8.jpg" width=235><IMG height=330 src="http://image16.360doc.com/DownloadImg/2010/10/2910/6371495_9.jpg" width=235></MARQUEE>

4、向上移动的图片：<DIV style="Z-INDEX: 2; LEFT: 10px; WIDTH: 422px; TOP: 100px; HEIGHT: 250px">

<TBODY>

<TR>

<MARQUEE style="FLOAT: none; MARGIN-LEFT: auto; WIDTH: 400px; MARGIN-RIGHT: auto; HEIGHT: 249px" scrollAmount=2 scrollDelay=50 direction=up width=300 height=229 border="0"><FONT face=楷书 color=#ff0033 size=5><B>需要加入的文字</B></FONT><BR><IMG src="链接图片的地址"> </FONT></MARQUEE></DIV></TD></TR></TBODY></TABLE></DIV>

效果示范：

欢迎朋友们光临游侠的博客

代码复制：<DIV style="Z-INDEX: 2; LEFT: 10px; WIDTH: 422px; TOP: 100px; HEIGHT: 250px">

<TBODY>

<TR>

<MARQUEE style="FLOAT: none; MARGIN-LEFT: auto; WIDTH: 400px; MARGIN-RIGHT: auto; HEIGHT: 249px" scrollAmount=2 scrollDelay=50 direction=up width=300 height=229 border="0"><FONT face=楷书 color=#ff0033 size=5><B>欢迎朋友们光临游侠的博客</B></FONT><BR><IMG src="//image16.360doc.com/DownloadImg/2010/10/2910/6371495_4.jpg"> </FONT></MARQUEE></DIV></TD></TR></TBODY></TABLE></DIV>

5、朦胧的的图片（1）：

效果示范：

代码复制：<IMG style="FILTER: Alpha(opacity=100,style=2)" height=455 src="http://image16.360doc.com/DownloadImg/2010/10/2910/6371495_11.jpg" width=600> </STRONG></FONT></P>

6、朦胧的的图片（2）：<IMG style="FILTER: Alpha(opacity=180,style=3)" height=400 src="链接的图片地址" width=600>

代码复制：<IMG style="FILTER: Alpha(opacity=180,style=3)" height=400 src="http://image16.360doc.com/DownloadImg/2010/10/2910/6371495_12.jpg" width=600>

（需要说明的是：这套源代码不是笔者原创，而是对其进行了修改、增加和完善，并对其相关知识点进行了解读，还附有具体操作要点。这是笔者通过实践证实了如下代码的可操作性，在某种程度上来说，也是笔者的一种劳动的结果。同时，也是你们很难找到的，是真的，请你们亲自尝试一下。具体如下：）

一、滚动效果

二、以上套滚动的图片代码

</marquee>

三、解读代码知识点

1、<marquee scrollamount="4" scrolldelay="60" direction="left" width="438" height="260"> ，这是固定搭配，不要更改。其中：

scrollamount="4"：数字“4”代表移动速度，可根据自己的情况调整，值在1-15之间，越大移动越快。

scrolldelay="60"：不用理它，就这样好了。

direction="left"：表示方向，：“left ” 向左移动，可改为上：up 下：down 右：right 。

width="438"：数字“438”表示制定义板块的长度（底边长），可根据自己的情况调整。

height="260"：数字“260”表示自定义板块的高度，可根据自己的情况调整。

那么， width="438" height="260"：结合在一起，表示自定义板块：438（长）/260（高）。

2、<img height="260" src="http://www.blog286.com/upfile/img/071209/1_082108.jpg" width="173" border="0" />：这也是固定的，表示一张

照片，每增加一个，就增加一张相片，随意增加，直到不让你增加为止：其中：

height="260"：数字“260”表示相片的高度，可随意调整，但不能超过自定义板块的高度。

width="173"：数字“173”表示相片的底边宽度，可随意调整，但不能超过自定义板块的宽度。

http://image16.360doc.com/DownloadImg/2010/10/2910/6371495_20.jpg：这是你需要相片的网址，可随意调整。

3、</marquee>：这是代码后缀部分，就不用管了，让它始终睡在那里好了。

四、操作要点

1、关于图片地址：以前我没有成功，主要就差在如何选择图片地址上。这对以前的我和初学者来说是最难对付的，也是最难找的、最难确定的一个环节，不信，你就自己找吧。其实，找图片地址很简单，只要鼠标对准你要选择的图片，点击右键——选择属性——点击后——图片的地址就在上面显示，同时，也有图片的大小，等等。但对于你自己博客中的的图片，点击到一张相片的界面后，在按上述的方法查找地址。对于其他照片也是如此。

2、关于镶嵌图片大小的确认。我们都知道，图片的大小千变万化，大小不一，而自定义的栏目却是固定的。如果不采取一定的技巧，你装入的图片就会走形，不美观，所以本人的技巧如下：还是举例说明吧，这样比较直观易懂。如：图片为1024*768：表示这张图片大小为长1024，高768，那1024/768==1.3333，这是一个比例，你要装入的图片固定高=260后，那长=260*1.3333=347。以此类推，错不了。

最后，再让我们来看以下几组不同的效果图,通过几次的推敲你一定会领悟其中的奥妙...祝你成功!

美女效果:

风景效果图:

美女图代码如下:

<TBODY>

<TR>

<TD>

清明上河图代码:

再补充说明一下:

1.添加滚动的图片 (水平）

代码为:<MARQUEE scrollAmount=2 scrollDelay=0 behavior=alternate width=240 height=260><IMG height=260 src="图片网址1" width=240 border=0> <IMG height=260 src="图片网址2" width=200 border=0> <IMG height=260 src="图片网址3" width=310 border=0> <IMG height=260 src="图片网址4" width=200 border=0></MARQUEE>

2.滚动图片的代码是：(向上）

其中一个<div...>....</div>为一个单元，想添加更多图片滚动可以复制，格式很清楚了，但是多了会影响速度。

其中，direction是方向，up=上，down=下，left=左，right=右，都可以按你的需要进行改动；width 是宽度，height是高度，可以根据自己的需要修改； scrollAmount 控制移动的速度,数字越大速度越快。

还有更多的立体滚动图片,等你点击呢-立体滚动图片的制作

耳目一新的图片屏风开合效果代码

效果图如下：

原始代码如下:

</MARQUEE></TD>

</MARQUEE></TD>

</MARQUEE></TD>

</MARQUEE></TD>

</MARQUEE></TD>

</TR>

</TBODY>

</TABLE>

代码用法说明：

兰色http://image16.360doc.com/DownloadImg/2010/10/2910/6371495_36.jpg为图片地址，您可以替换为自己的图片.图片地址找法：鼠标右键单击图片---属性--地址（URL）后面的地址就是。替换代码中的图片地址，即可制作出属于您自己的个性图片效果！

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。