注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

.

.

 
 
 

日志

 
 

引用 【博客】图片处理特效代码——动态篇  

2009-04-26 21:42:59|  分类: 常用代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

引用

秋夢無痕【博客】图片处理特效代码——动态篇

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用  2004季候风 的【菜鸟玩博】图片处理特效代码——动态篇(原)

温馨提示:本文中所有代码均经过本人认真测试,可以放心使用!

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

一、自右向左移动
(一)单张图片左移
1、代码格式

<DIV align=center>
<MARQUEE scrollAmount=3 direction=left width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片连接地址" width=图片宽度 height=图片高度>
</MARQUEE><DIV>


代码说明:
(1)窗口和图片的宽度、高度的单位为像素。
(2)显示窗口宽度通常以大于等于图片宽度为宜(特长图片例外),显示窗口高度通常应等于图片高度。
(3)scrollAmount为移动速度。
2、效果图例
(1)普通效果
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客
(2)带滤镜效果
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

(二)多张图片左移
1、代码格式

<DIV align=center>
<MARQUEE scrollAmount=2 direction=left width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片1连接地址" width=图片宽度 height=图片高度>
<IMG src="图片2连接地址" width=图片宽度 height=图片高度>
<IMG src="图片3连接地址" width=图片宽度 height=图片高度>
<IMG src="图片4连接地址" width=图片宽度 height=图片高度>
<IMG src="图片5连接地址" width=图片宽度 height=图片高度>
<IMG src="图片6连接地址" width=图片宽度 height=图片高度>
……
<IMG src="图片N连接地址" width=图片宽度 height=图片高度>
</MARQUEE><DIV>


代码说明:(1)窗口和图片的宽度、高度的单位为像素。
(2)显示窗口宽度通常以大于等于图片宽度为宜,显示窗口高度通常应等于图片高度。
(3)多张图片之规格尺寸通常应大小一致。
(4)scrollAmount为移动速度。
2、效果图例
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

二、自左向右移动
(一)单张图片右移
1、代码格式

<DIV align=center>
<MARQUEE scrollAmount=2 direction=right width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片连接地址" width=图片宽度 height=图片高度>
</MARQUEE><DIV>


代码说明:
(1)窗口和图片的宽度、高度的单位为像素。
(2)显示窗口宽度通常以大于等于图片宽度为宜(特长图片例外),显示窗口高度通常应等于图片高度。
(3)scrollAmount为移动速度。
2、效果图例
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

(二)多张图片右移
1、代码格式

<DIV align=center>
<MARQUEE scrollAmount=2 direction=right width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片1连接地址" width=图片宽度 height=图片高度>
<IMG src="图片2连接地址" width=图片宽度 height=图片高度>
<IMG src="图片3连接地址" width=图片宽度 height=图片高度>
<IMG src="图片4连接地址" width=图片宽度 height=图片高度>
<IMG src="图片5连接地址" width=图片宽度 height=图片高度>
<IMG src="图片6连接地址" width=图片宽度 height=图片高度>
……
<IMG src="图片N连接地址" width=图片宽度 height=图片高度>
</MARQUEE><DIV>


代码说明:
(1)窗口和图片的宽度、高度的单位为像素。
(2)显示窗口宽度通常以大于等于图片宽度为宜,显示窗口高度通常应等于图片高度。
(3)多张图片之规格尺寸通常应大小一致。
(4)scrollAmount为移动速度。
2、效果图例
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

三、自下向上移动
(一)单张图片上移
1、代码格式

<DIV align=center>
<MARQUEE scrollAmount=3 direction=up width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片连接地址" width=图片宽度 height=图片高度>
</MARQUEE><DIV>


代码说明:
(1)窗口和图片的宽度、高度的单位为像素。
(2)显示窗口宽度通常应等于图片宽度,显示窗口高度通常以大于等于图片高度为宜(特长图片例外)。
(3)scrollAmount为移动速度。
2、效果图例
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

(二)多张图片上移
1、代码格式

<DIV align=center>
<MARQUEE scrollAmount=3 direction=up width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片1连接地址" width=图片宽度 height=图片高度>
<IMG src="图片2连接地址" width=图片宽度 height=图片高度>
<IMG src="图片3连接地址" width=图片宽度 height=图片高度>
<IMG src="图片4连接地址" width=图片宽度 height=图片高度>
<IMG src="图片5连接地址" width=图片宽度 height=图片高度>
<IMG src="图片6连接地址" width=图片宽度 height=图片高度>
……
<IMG src="图片N连接地址" width=图片宽度 height=图片高度>
</MARQUEE><DIV>


代码说明:
(1)窗口和图片的宽度、高度的单位为像素。
(2)显示窗口宽度通常应等于图片宽度,显示窗口高度通常以大于等于图片高度为宜。
(3)多张图片之规格尺寸通常应大小一致。
(4)scrollAmount为移动速度。
2、效果图例
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

四、自上向下移动
(一)单张图片下移
1、代码格式

<DIV align=center>
<MARQUEE scrollAmount=3 direction=down width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片连接地址" width=图片宽度 height=图片高度>
</MARQUEE><DIV>

 
代码说明:
(1)窗口和图片的宽度、高度的单位为像素。
(2)显示窗口宽度通常应等于图片宽度,显示窗口高度通常以大于等于图片高度为宜(特长图片例外)。
(3)scrollAmount为移动速度。
2、效果图例
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

(二)多张图片下移
1、代码格式

<DIV align=center>
<MARQUEE scrollAmount=3 direction=down width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片1连接地址" width=图片宽度 height=图片高度>
<IMG src="图片2连接地址" width=图片宽度 height=图片高度>
<IMG src="图片3连接地址" width=图片宽度 height=图片高度>
<IMG src="图片4连接地址" width=图片宽度 height=图片高度>
<IMG src="图片5连接地址" width=图片宽度 height=图片高度>
<IMG src="图片6连接地址" width=图片宽度 height=图片高度>
……
<IMG src="图片N连接地址" width=图片宽度 height=图片高度>
</MARQUEE><DIV>

代码说明:
(1)窗口和图片的宽度、高度的单位为像素。
(2)显示窗口宽度通常应等于图片宽度,显示窗口高度通常以大于等于图片高度为宜。
(3)多张图片之规格尺寸通常应大小一致。
(4)scrollAmount为移动速度。
2、效果图例
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

五、倾斜移动
1、代码格式

<DIV align=center>
<marquee scrollamount=5 direction=D1 height=显示窗口高度>
<DIV align=center>
<marquee scrollamount=5 direction=D2 width=显示窗口宽度><IMG src="图片连接地址" width=图片宽度 height=图片高度 border=0></marquee></DIV ></marquee></DIV>

代码说明:
D1=down或up,D2=left或right
2、效果图例
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

六、左右摆动
(一)单张图片左右摆动
1、代码格式

<DIV align=center>
<MARQUEE scrollDelay=60 behavior=alternate width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片连接地址" width=图片宽度 height=图片高度 border=0></MARQUEE></DIV>

代码说明:
scrollDelay为滚动两次之间的延迟时间,数值越大越有跳跃感,可根据情况自行设定。
2、效果图例
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

(二)多张图片左右摆动
1、代码格式

<DIV align=center>
<MARQUEE scrollDelay=60 behavior=alternate width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片1连接地址" width=图片宽度 height=图片高度 border=0>
<IMG src="图片2连接地址" width=图片宽度 height=图片高度 border=0>
<IMG src="图片3连接地址" width=图片宽度 height=图片高度 border=0>
<IMG src="图片4连接地址" width=图片宽度 height=图片高度 border=0>
……
<IMG src="图片n连接地址" width=图片宽度 height=图片高度 border=0>
</MARQUEE></DIV>

代码说明:
scrollDelay为滚动两次之间的延迟时间,数值越大越有跳跃感,可根据情况自行设定。
2、效果图例
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

七、上下振动
(一)单张图片上下振动
1、代码格式

<DIV align=center>
<MARQUEE scrollDelay=60 direction=up behavior=alternate width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片连接地址" width=图片宽度 height=图片高度 border=0></MARQUEE></DIV>

代码说明:
scrollDelay为滚动两次之间的延迟时间,数值越大越有跳跃感,可根据情况自行设定。
2、效果图例
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

(二)多张图片上下振动
1、代码格式

<DIV align=center>
<MARQUEE scrollDelay=60 direction=up behavior=alternate width=显示窗口宽度 height=显示窗口高度>
<IMG src="图片1连接地址" width=图片宽度 height=图片高度 border=0>
<IMG src="图片2连接地址" width=图片宽度 height=图片高度 border=0>
<IMG src="图片3连接地址" width=图片宽度 height=图片高度 border=0>
<IMG src="图片4连接地址" width=图片宽度 height=图片高度 border=0>
……
<IMG src="图片n连接地址" width=图片宽度 height=图片高度 border=0>
</MARQUEE></DIV>


代码说明:
(1) scrollDelay为滚动两次之间的延迟时间,数值越大越有跳跃感,可根据情况自行设定。
(2)多张图片上下振动的显示窗口高度应大于N张图片的总高度。
2、效果图例
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

八、反相移动(多图)
(一)自中间向左右反相移动
1、代码格式

<DIV align=center>
<MARQUEE scrollAmount=3 direction=left width=左半显示窗口宽度 height=左半显示窗口高度>
<IMG src="图片1连接地址">
<IMG src="图片2连接地址">
<IMG src="图片3连接地址">
……
<IMG src="图片N连接地址">
</MARQUEE>
<MARQUEE scrollAmount=3 direction=right width=右半显示窗口宽度 height=右半显示窗口高度>
<IMG src="图片一连接地址">
<IMG src="图片二连接地址">
<IMG src="图片三连接地址">
……
<IMG src="图片M连接地址">
</MARQUEE></DIV>

 
代码说明:
(1)若要使图片自两边向中间移动,只需将上述代码中的left和right的位置互换一下即可。
(2)向左右相反方向移动图片的数量通常应相等,即M=N。
2、效果图例 
(1)自中间向两边移动
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客
(2)自两边向中间移动
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客
(3)多组水平反相移动(折展效果)
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客
 

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

(二)自中间向上下反相移动
1、代码格式 

<DIV align=center>
<MARQUEE scrollAmount=3 direction=up width=上半显示窗口宽度 height=上半显示窗口高度>

<DIV align=center>
<IMG src="图片1连接地址">
<IMG src="图片2连接地址">
<IMG src="图片3连接地址">
……
<IMG src="图片N连接地址">
</DIV></MARQUEE></DIV>

<DIV align=center>
<MARQUEE scrollAmount=3 direction=down width=下半显示窗口宽度 height=下半显示窗口高度><DIV align=center>
<IMG src="图片一连接地址">
<IMG src="图片二连接地址">
<IMG src="图片三连接地址">
……
<IMG src="图片M连接地址">
</DIV ></MARQUEE></DIV>

代码说明:
(1)若要使图片自上下向中间移动,只需将上述代码中的up和down的位置互换一下即可。
(2)向上下相反方向移动图片的数量通常应相等,即M=N。
2、效果图例 
(1)自中间向上下移动
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客
 
         (2)自上下向中间移动
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客 引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

九、自动切换翻页
1、代码格式 

<DIV align=center>
<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://image2.sina.com.cn/bj/zonghe/pixviewer.swf width=300 height=200 type=application/x-shockwave&amp;13;&amp;10;&amp;13;&amp;10;-flash wmode="opaque" bgcolor="#38B0DE" FlashVars="pics=图片1地址|图片2地址|图片3地址|……|图片N地址&amp;links=文章1地址|文章2地址|文章3地址|……|文章N地址&amp;texts=文章1标题|文章2标题|文章3标题|……|文章N标题&amp;13;&amp;10;&amp;13;&amp;10;5||||&amp;borderwidth=300&amp;borderheight=200&amp;textheight=0" menu="false" quality="high">
</DIV>

代码说明:
(1)width=宽度(像素),height=高度(像素),textheight是文字区域高度,自己可根据实际自行设置。
(2)bgcolor="#38B0DE" 双引号中间部份是背景颜色值,可以参考颜色代码值设置。
(3)图片地址:就是你的图片或者文章所配图片的地址。
文章地址:如果图片1是你用是文章1所配的图片,那就把文章1的地址粘贴在这里。文章标题:就是这篇文章的标题。
(4)如果需要添加文章标题,则应添加相应的文章地址和文章标题,textheight值通常在20-40之间。
2、效果图例
(1)不带文章标题效果
(2)带文章标题效果

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

十、图片在边框中移动
1、效果一及其代码

<DIV align=center>
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 550px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
<P>这是测试文字</P></DIV></DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>
<TABLE cellSpacing=20 cellPadding=0 width=500 background=http://www.s1.inets.jp/~rouge/free/17.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=0 width="100%" background=http://pixelsbyjudy.com/Background_tiles/floral1_small.jpg border=0>
<TBODY>
<TR>
<TD align=middle>
<TABLE height=333 width=500 background=http://www.longhumen.com.cn/BBS/UploadFile/2004-9/2004943127488.jpg border=1>
<TBODY>
<TR>
<TD>
<CENTER>
<MARQUEE scrollAmount=2 width="100%" direction="left">
<P align=center><IMG src="http://img.photo.163.com/D8NW4oWkw1h8ZEl7lsQsuw==/135952413754809701.jpg"><IMG src="http://img.photo.163.com/huKGIuiWzIja0FpHxCtnKQ==/156781562031799825.jpg"><IMG src="http://img.photo.163.com/2doh9gUAXHITVtehPfpRVA==/161848111612450704.jpg"><IMG src="http://img.photo.163.com/qi8pdt2B16RKaB1jAaAnag==/161848111612450737.jpg"><IMG src="http://img.photo.163.com/e5v1L_rMuMcx0sJhr3N_HQ==/201817558306498216.jpg"><IMG src="http://img.photo.163.com/EwBDqX_npDg6WQncYDS3Lg==/201817558306498179.jpg"><IMG src="http://img.photo.163.com/DXsROFaXxSyopXmUmCmKQQ==/193654783978438490.jpg"><IMG src="http://img.photo.163.com/Ou5HKKhgrYV5uofCbnPC5A==/156781562031799794.jpg"> </P></MARQUEE></CENTER></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>

 

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

2、效果二及其代码

<DIV align=center>
<TABLE borderColor=#cccccc height=350 cellSpacing=0 cellPadding=0 width=430 background=http://img.blog.163.com/photo/PcaLmEW3u30QFodpvW9yLQ==/3455386814100151718.jpg border=1>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=2 scrollDelay=90 direction=up width=420 height=350>
<TABLE style="WIDTH: 400px; HEIGHT: 266px" borderColor=#cccccc cellSpacing=2 cellPadding=3 align=center background=http://img.photo.163.com/X4DfX2guT-xwLDkW9UQIhg==/132293239054455632.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
</MARQUEE></TD></TR></TBODY></TABLE></DIV>

 
 

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

3、效果三及其代码

<DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 width=400 align=center>
<TBODY>
<TR align=middle>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">
<DIV align=center>
<MARQUEE scrollDelay=60 behavior=alternate width="100%" height=150>
<DIV align=center><IMG height=140 src="http://img.photo.163.com/THy1q5h46wRVTx-BUY5UFw==/287948901175134300.jpg" width=220 border=0></DIV></A></MARQUEE></DIV></TD></TR>
<TR>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">
<DIV align=center>
<MARQUEE scrollDelay=60 direction=up behavior=alternate width="100%" height=160>
<DIV align=center><IMG height=140 src="http://img.photo.163.com/Uchcr2-0s4dWHHlZ82cfAw==/299207900243557367.jpg" width=220 border=0></DIV></A></MARQUEE></DIV></TD></TR></TBODY></TABLE></DIV>

 
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客
引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

附注:

1、各主要参数的含义:

align:是设定活动对象(图片或文字)的位置;

direction:用于设定活动对象的滚动方向是向左、向右、向上、向下;

Behavior:用于设定滚动的方式,主要由三种方式:behavior="scroll"表示由一端滚动到另一端;

behavior="slide" 表示由一端滑动到另一端,且不再重复;behavior="alternate"表示在两端之间来回滚动。

Height:用于设定滚动对象的高度;

Width:则设定滚动对象的宽度;

Hspace和vspace:分别用于设定滚动对象的左右边框和上下边框的宽度;

Scrollamount:用于设定活动对象的滚动距离;数值越大滚动越快;

scrolldelay:用于设定滚动两次之间的延迟时间,数值越大越有跳跃感;

Loop:用于设定滚动的次数,不设置该值则为无限循环;

<marquee>标记的默认情况是向左滚动无限次,字幕高度是文本高度,滚动范围:水平滚动的宽度是当前位置的宽度;垂直滚动的高度是当前位置的高度。

2、代码使用方法:

(1)放于博客主页:在编辑状态下,依次进入“装扮博客”、“设置首页内容”,选择“添加自定义模块”,将代码粘贴到模块中,合理设置后再保存即可。

(2)放于日志中:在编辑状态下,进入写日志或编辑原有日志,依次点击“全部功能”、“<>”按钮,进入HTML代码编辑状态,将相关代码粘贴到合适位置,合理设置后再保存即可。

呵呵,终于写完这部分了!只希望新入门的朋友能一目了然!引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

回目录

博客学习目录

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客:此文章由☆秋梦园主☆整理完成,请尊重博主的辛苦收集

转载或引用请注明出处或保留LOGO,谢谢!

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

欢迎朋友们加入秋的★浪漫梦幻国度★圈子!

引用 【博客】图片处理特效代码——动态篇 - 老船长 - 老船长的博客

  评论这张
 
阅读(358)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017