图片滚动特效代码.docx
- 文档编号:25471403
- 上传时间:2023-06-09
- 格式:DOCX
- 页数:8
- 大小:15.78KB
图片滚动特效代码.docx
《图片滚动特效代码.docx》由会员分享,可在线阅读,更多相关《图片滚动特效代码.docx(8页珍藏版)》请在冰豆网上搜索。
图片滚动特效代码
图片滚动特效代码
图片滚动特效代码注意:
各参数详解:
(1)scrollAmount。
它表示速度,值越大速度越快。
如果没有它,默认为6,建议设为1~3比较好。
(2)width和height,表示滚动区域的大小,width是宽度,height是高度。
特别是在做垂直滚动的时候,一定要设height的值。
(3)direction。
表示滚动的方向,默认为从右向左:
←←←。
可选的值有right、down、up。
滚动方向分别为:
right表示→→→,up表示↑,down表示↓。
(4)scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。
通常scrollDelay是不需要设置的。
(5)behavior。
用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)
(6)蓝色地方是图片地址,可以换上自己喜欢的图片。
1.图片向上循环滚动代码:
<CENTER>
<MARQUEEwidth=220scrollAmount=3height=275direction=up>
<A><IMGheight=275src="图片地址"width=220></A>
<A><IMGheight=275src="图片地址"width=220></A>
<A><IMGheight=275src="图片地址"width=220></A>
</MARQUEE></CENTER>
效果:
2.图片向下循环滚动代码:
<CENTER>
<MARQUEEwidth=220scrollAmount=3height=275direction=down>
<A><IMGheight=275src="图片地址"width=220></A>
<A><IMGheight=275src="图片地址"width=220></A>
<A><IMGheight=275src="图片地址"width=220></A>
</MARQUEE></CENTER>
效果:
3.图片向左循环滚动代码:
<CENTER>
<MARQUEEwidth=220scrollAmount=3height=275>
<A><IMGheight=275src="图片地址"width=220></A>
<A><IMGheight=275src="图片地址"width=220></A>
<A><IMGheight=275src="图片地址"width=220></A>
</MARQUEE></CENTER>
效果:
4.图片向右循环滚动代码:
<CENTER>
<MARQUEEwidth=220scrollAmount=3height=275direction=right>
<A><IMGheight=275src="图片地址"width=220></A>
<A><IMGheight=275src="图片地址"width=220></A>
<A><IMGheight=275src="图片地址"width=220></A>
</MARQUEE></CENTER>
效果:
5.图片来回滚动代码:
<CENTER>
<MARQUEEwidth=380scrollAmount=3height=275behavior="alternate">
<A><IMGheight=275src="图片地址"width=220></A>
<A><IMGheight=275src="图片地址"width=220></A>
<A><IMGheight=275src="图片地址"width=220></A>
</MARQUEE></CENTER>
效果:
以上五种图片滚动效果代码说明:
1.“width=380”表示滚动的宽度范围,数值可以按自己喜欢的调整
2.“height=275”表示滚动的高度范围,数值可以随意调整
3.“scrollAmount=3”表示滚度速度为3,1到3为最佳数值,默认为6
4.“height=275”表示图片的高度为275
(建议按自己喜欢的图片高度调整)
5.“width=220”表示图片的宽度为220
(建议按自己喜欢的图片宽度调整)
6.“图片地址”表示图片的属性地址粘贴处
(因本人太懒,所以所有的滚动图片都只用一张代替;(*^__^*),当然,
每个“图片地址”都可以换上不同的图片地址,效果会更好。
)
下面我们说说图片的添加:
首先:
【“<A><IMGheight=275src="图片地址"width=220></A>”】
表示一张图片的粘贴代码,如果要增加或减少一个图片,则是添加或删除一段这个代码就ok了。
那么:
如何添加?
其实只要把这段代码放在相同的代码后面或前面就可以了。
6.图片居中向两边滚动代码:
<center><marqueewidth=220scrollAmount=3height=275>
<A><imgwidth=220src=图片地址1height=275></A>
<A><imgwidth=220src=图片地址2height=275></A>
</marquee><marqueedirection=rightwidth=220scrollAmount=3height=275>
<A><imgwidth=220src=图片地址2height=275></A>
<A><imgwidth=220src=图片地址1height=275></A>
</marquee></center>
效果:
7.图片居中上下分开滚动代码:
<center><marqueewidth=220height=200direction=upscrollAmount=3>
<A><imgsrc="图片地址1"width=220height=275></A>
<A><imgsrc="图片地址2"width=220height=275></A>
</marquee></center>
<center><marqueewidth=220height=200direction=downscrollAmount=3>
<A><imgsrc="图片地址2"width=220height=275></A>
<A><imgsrc="图片地址1"width=220height=275></A>
</marquee></center>
效果:
8.图片居中上下靠拢滚动代码:
<center>
<MARQUEEscrollAmount=2width=220height=200direction=down>
<A><imgsrc="图片地址1"width=220height=275></A>
<A><imgsrc="图片地址2"width=220height=275></A>
</MARQUEE></center>
<center>
<MARQUEEwidth=220height=200style="FILTER:
flipv(enabled=1)"scrollAmount=2direction=down>
<A><imgsrc="图片地址1"width=220height=275></A>
<A><imgsrc="图片地址2"width=220height=275></A>
</MARQUEE></center>
效果:
以上6、7、8双向滚动代码说明:
1.绿色地方“width=220height=200”表示滚动范围的宽和高度,
尤其宽度绝对要参对图片的宽度来调整。
2.为什么要区分图片地址的1和2,这是因为要说明如果做好这个对图效果,
则需要所有的图片地址1都放相同图片,图片地址2也是要对齐2的图片,
如果要添加图片,则需要上下图片对应添加。
比如:
添加图片地址3后代码显示:
<A><imgsrc="图片地址1"width=220height=275></A>
<A><imgsrc="图片地址2"width=220height=275></A>
<A><imgsrc="图片地址3"width=220height=275></A>
<A><imgsrc="图片地址3"width=220height=275></A>
<A><imgsrc="图片地址2"width=220height=275></A>
<A><imgsrc="图片地址1"width=220height=275></A>9.图片设定百叶窗式对开滚动代码:
<TABLEborderColor=#FF00CCcellSpacing=2cellPadding=0width=440align=centerborder=2>
<TBODY>
<TR>
<TDalign=middle>
<MARQUEEscrollAmount=1scrollDelay=100direction=rightwidth=110>
<A><imgsrc="图片地址1"width=220height=275></A>
</MARQUEE></TD>
<TDalign=middle>
<MARQUEEscrollAmount=1scrollDelay=100width=110>
<A><imgsrc="图片地址2"width=220height=275></A>
</MARQUEE></TD>
<TDalign=middle>
<MARQUEEscrollAmount=1scrollDelay=100direction=rightwidth=110>
<A><imgsrc="图片地址1"width=220height=275></A>
</MARQUEE></TD>
<TDalign=middle>
<MARQUEEscrollAmount=1scrollDelay=100width=110>
<A><imgsrc="图片地址2"width=220height=275></A>
</MARQUEE></TD>
</TR></TBODY></TABLE>
效果:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 图片 滚动 特效代码