分享

☆ 滚动图片特效代码 ☆

 雪莲588 2014-11-22

☆ 滚动图片特效代码 ☆  

2009-04-14 21:56:04|  分类: 博客代码素材 |举报 |字号 订阅

 

1.代码如下:(换下宽值和图片地址即可!) direction属性:决定文本的滚动方向,分为向左left和向右right,up和down默认状态向左。 代码:

☆ 滚动图片特效代码 ☆ - 浪漫人生 - . ☆ 滚动图片特效代码 ☆ - 浪漫人生 - . ☆ 滚动图片特效代码 ☆ - 浪漫人生 - . ☆ 滚动图片特效代码 ☆ - 浪漫人生 - . ☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

 

代码如下:

<MARQUEE height=100 widhth="200">

<P align=left>

<P align=center>

<IMG src="http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_1.jpg" width=123>

<IMG src="http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_1.jpg" width=123>

<IMG src="http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_1.jpg" width=123>

<IMG src="http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_1.jpg" width=123>

<IMG src="http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_1.jpg" width=123>

<IMG src="http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_1.jpg" width=123>

</P>

</MARQUEE>

2.向左移动

☆ 滚动图片特效代码 ☆ - 浪漫人生 - . ☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

 

代码如下:

<marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll">

<img border="0" src=" http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_2.jpg">

<img border="0" src=" http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_2.jpg">

</marquee>

 3.从下往上滚动

☆ 滚动图片特效代码 ☆ - 浪漫人生 - . ☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

 

代码如下:

<marquee align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior="scroll">

<img border="0" src=" http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_3.jpg">

<img border="0" src=" http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_3.jpg">

</marquee>

4. 文字效果/从右向左滚动

浪漫人生欢迎你光临

代码如下:

 <marquee direction=left>从右向左滚动</marquee>

5.从左向右滚动

浪漫人生欢迎你光临

代码如下:

<marquee direction=right>从左向右滚动</marquee>

6.behavior属性:指定文本的滚动方式,分为三种:

Scroll:从一端消失后,在另一端出现并继续滚动。

(1)一圈一圈地滚动

一圈一圈地滚动

 

代码如下:

<marquee behavior=scroll>一圈一圈地滚动</marquee>

(2)Slide:从一端滚动,接触到另一端后停止

只滚动一次就停止

 

代码如下

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

(3) Alternate:从一端滚动到另一端后,反向滚动。

来回滚动

 

代码如下

<marquee behavior=alternate>来回滚动</marquee>

direction=up(left、right、down) 这个属性可以更改,这样就可以实现上下左右了

7.原地跳动的文字


代码如下:

<CENTER><FONT face=隶书 color=red size=25>

<MARQUEE direction=up behavior=alternate width=60 height=120>祝</MARQUEE><FONT color=yellow>

<MARQUEE direction=up behavior=alternate width=60 height=80>大</MARQUEE><FONT color=brown>

<MARQUEE direction=up behavior=alternate width=60 height=120>家</MARQUEE><FONT color=green>

<MARQUEE direction=up behavior=alternate width=60 height=80>永</MARQUEE><FONT color=orange>

<MARQUEE direction=up behavior=alternate width=60 height=120>远</MARQUEE><FONT color=yellow>

<MARQUEE direction=up behavior=alternate width=60 height=80>幸</MARQUEE><FONT color=orange>

<MARQUEE direction=up behavior=alternate width=60 height=120>福</MARQUEE></FONT></B></MARQUEE></FONT></CENTER></FONT></FONT></FONT></FONT></FONT></FONT>

8.竖排字渐出

 

我带着远古的心愿
你怀揣前世的祈盼
我饱含如许的虔诚
你浸润最深的期待
我们跨越万水千山
赴今世的约定...
你感觉我深情凝眸的甜柔
我倾听你心室澎湃的跳动
白云轻盈飘荡
星月神秘闪烁

燃烧的篝火旁
我们席地而坐
倾诉不尽的相思
燃烧的火焰是不灭的炙热
让我们一起出发
背上快乐的行囊
携着一路的欢唱
踏着灿烂的芬芳
望--天上云卷霞飞
看--地下小桥流水
拥--郁郁山川入怀
枕--簇簇波浪入眠
把--忧烦抛在身后
让--愉悦洒满诗行

代码如下:

<DIV align=center>

<MARQUEE scrollAmount=1 scrollDelay=100 behavior=slide loop=1 width=550 height=293>

<MARQUEE style=" WRITING-MODE: tb-rl" scrollAmount=1 scrollDelay=100 direction=up width=550 height=290>

<P align=left><FONT style="FONT-SIZE: 18pt; COLOR: #ea0000; FONT-FAMILY: 方正姚体" color=#ff0000>我带着远古的心愿<BR>你怀揣前世的祈盼<BR>我饱含如许的虔诚<BR>你浸润最深的期待<BR>我们跨越万水千山<BR>赴今世的约定...<BR>你感觉我深情凝眸的甜柔<BR>我倾听你心室澎湃的跳动<BR>白云轻盈飘荡<BR>星月神秘闪烁<BR><BR>燃烧的篝火旁<BR>我们席地而坐<BR>倾诉不尽的相思<BR>燃烧的火焰是不灭的炙热<BR>让我们一起出发<BR>背上快乐的行囊<BR>携着一路的欢唱<BR>踏着灿烂的芬芳<BR>望--天上云卷霞飞<BR>看--地下小桥流水<BR>拥--郁郁山川入怀<BR>枕--簇簇波浪入眠<BR>把--忧烦抛在身后<BR>让--愉悦洒满诗行 <BR><BR></FONT></P></MARQUEE></MARQUEE></DIV>

9.飞舞的文字代碼

 

代码:

<MARQUEE scrollAmount=8 direction=right behavior=alternate><B><FONT color=#7700bb size=5><FONT color=lime>

<MARQUEE direction=up behavior=alternate width=40 height=200 align="middle">浪</MARQUEE><FONT color=red>

<MARQUEE direction=up behavior=alternate width=40 height=150>漫</MARQUEE><FONT color=red>

<MARQUEE direction=up behavior=alternate width=40 height=200>人</MARQUEE><FONT color=orange>

<MARQUEE direction=up behavior=alternate width=40 height=150>生</MARQUEE><FONT color=orange><MARQUEE direction=up behavior=alternate width=40 height=200>欢</MARQUEE><FONT color=orange><MARQUEE direction=up behavior=alternate width=40 height=150>迎</MARQUEE><FONT color=red><MARQUEE direction=up behavior=alternate width=40 height=200>你</MARQUEE><FONT color=orange></B></FONT></FONT></FONT></FONT></FONT></MARQUEE>

提示大家字不够可以自己添加/复制<MARQUEE direction=up behavior=alternate width=40 height=150>龍</MARQUEE><FONT color=red>这代码越多你添加的字起来就不会那么别扭/当然你可以直接在上面加多几个字/颜色可以自己改

10.图片中加入文字


朋友您好!

亲自动手!

体验成功!

 

代码如下:

<DIV style="PADDING-RIGHT: 0px; MARGIN-TOP: 10px; FONT-SIZE: 9pt; OVERFLOW-X: hidden; WIDTH: 97%; WORD-BREAK: break-all; TEXT-INDENT: 24px; LINE-HEIGHT: normal; HEIGHT: 200px; WORD-WRAP: break-word" auto';">

<P align=center><BR>

<TABLE height=312 cellSpacing=0 cellPadding=0 width=410 align=center background=http://img.photo.163.com/fsJHLbSY9wtY7kb3JwUTFg==/649362771272314331.gif border=3>

<TBODY>

<TR>

<TD>

<P align=center>

<MARQUEE scrollAmount=3 direction=up>

<P align=center><FONT face=宋书 color=#ff0000 size=8>朋友您好!</FONT></P>

<P align=center><FONT face=宋书 color=#ff0000 size=8>亲自动手!</FONT></P>

<P align=center><FONT face=宋书 color=#ff0000 size=8>体验成功!</FONT></P></MARQUEE></P></TD></TR></TBODY></TABLE></P></DIV>

11.移动代码如下:

代码:效果1

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

 

<MARQUEE scrollAmount=3 direction=down height=371><MARQUEE scrollAmount=3 direction=up height=371> <DIV align=center><IMG src="http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_4.jpg"></DIV></MARQUEE></MARQUEE>

代码:效果2

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

 

<MARQUEE scrollAmount=3 direction=up height=371><MARQUEE scrollAmount=3 direction=down height=371><DIV align=center><IMG src="http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_5.jpg"></DIV></MARQUEE></MARQUEE>

代码:效果3

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .
<DIV align=center> <MARQUEE scrollAmount=2 behavior=alternate width=630 height=471><MARQUEE scrollAmount=2 direction=up width=330 height=471><IMG src="http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_6.jpg"></MARQUEE></MARQUEE></DIV>
代码:效果4
☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

 

<MARQUEE scrollAmount=3 behavior=alternate width="100%"><MARQUEE scrollAmount=3 width="98%"><DIV align=center><IMG src="http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_7.jpg"></DIV></MARQUEE></MARQUEE>

代码:效果5

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .


<MARQUEE scrollAmount=2 direction=down><DIV align=center><IMG src="http://wrxpt.go1./texiaodaima/02/100.gif"><br><br><IMG src="http://wrxpt.go1./texiaodaima/02/100.gif"><br><br> <IMG src="http://wrxpt.go1./texiaodaima/02/100.gif"><br><br> <IMG src="http://wrxpt.go1./texiaodaima/02/100.gif"><br><br> <IMG src="http://wrxpt.go1./texiaodaima/02/100.gif"><br><br></DIV> </MARQUEE> <MARQUEE style=" FILTER: flipv(enabled=1)" scrollAmount=2 direction=down> <DIV align=center><IMG src="http://wrxpt.go1./texiaodaima/02/100.gif"><br><br> <IMG src="http://wrxpt.go1./texiaodaima/02/100.gif"><br><br> <IMG src="http://wrxpt.go1./texiaodaima/02/100.gif"><br><br> <IMG src="http://wrxpt.go1./texiaodaima/02/100.gif"><br><br> <IMG src="http://wrxpt.go1./texiaodaima/02/100.gif"><br><br></DIV> </MARQUEE>

代码:效果6

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

☆ 滚动图片特效代码 ☆ - 浪漫人生 - .


代码:效果7 
☆ 滚动图片特效代码 ☆ - 浪漫人生 - . ☆ 滚动图片特效代码 ☆ - 浪漫人生 - . ☆ 滚动图片特效代码 ☆ - 浪漫人生 - . ☆ 滚动图片特效代码 ☆ - 浪漫人生 - .

 

 

<TABLE cellSpacing=0 cellPadding=0 width=500 align=center border=0> <TBODY> <TR> <TD align=middle> <MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=120><IMG src="

http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_10.jpg"></MARQUEE></TD> <TD align=middle> <MARQUEE scrollAmount=1 scrollDelay=100 width=120><IMG src="

http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_10.jpg"></MARQUEE></TD> <TD align=middle> <MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=120><IMG src="

http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_10.jpg"></MARQUEE></TD> <TD align=middle> <MARQUEE scrollAmount=1 scrollDelay=100 width=120><IMG src="

http://image79.360doc.com/DownloadImg/2014/11/2219/47359267_10.jpg"></MARQUEE></TD></TR></TBODY></TABLE>

注: 各参数详解:

 a)scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好。

b)width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。

c)direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。

d)scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。

e)behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)

 


温馨提示:本博客的内容素材来源于网络,如果侵犯了你的利益请您留言告知,我在第一时间删除,并向版权者深深歉意,简短的文字捎去我真切的问候;深深地送上我美好的祝福!
本博常用精典分隔线 - 浪漫人生 - .

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约