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

美好宁静之光

美好的回忆从这里开始......

 
 
 

日志

 
 

滚动图片的制作  

2010-01-22 22:43:52|  分类: 图片制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自大鱼儿《 滚动图片的制作》

 一、滚动效果

 滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使

 

 

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

<marquee  scrollamount="4" scrolldelay="60" direction="left" width="438" height="260" >

<img height="260" src="http://www.blog286.com/upfile/img/071209/1_081856.jpg" width="173" border="0" />

<img height="260" src="http://www.blog286.com/upfile/img/071209/1_081917.jpg" width="173" border="0" />

<img height="260" src="http://www.blog286.com/upfile/img/071209/1_081951.jpg" width="173" border="0" />

<img height="260" src="http://www.blog286.com/upfile/img/071209/1_082010.jpg" width="173" border="0" />

<img height="260" src="http://www.blog286.com/upfile/img/071209/1_082034.jpg" width="173" border="0" />

<img height="260" src="http://www.blog286.com/upfile/img/071209/1_082046.jpg" width="173" border="0" />

<img height="260" src="http://www.blog286.com/upfile/img/071209/1_082057.jpg" width="173" border="0" />

<img height="260" src="http://www.blog286.com/upfile/img/071209/1_082108.jpg" width="173" border="0" />

</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://www.blog286.com/upfile/img/071209/1_082108.jpg这是你需要相片的网址,可随意调整。

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

四、操作要点

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

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

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

  美女效果: 

 滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使

 

风景效果图: 

 

 滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使

美女图代码如下:

 

<TABLE style="BORDER-RIGHT: 1px solid; BORDER-BOTTOM: 1px solid" cellSpacing=0 cellPadding=0 width=760 border=1>

<TBODY>

<TR>

<TD>

<MARQUEE scrollAmount=2 scrollDelay=30 width="100%" height=1252><A href="http://img.blog.163.com/photo/KowYYVDmqXGPCARHlpqG-g==/3730669341323339142.jpg" target=_blank><IMG height=1250 src="http://img.blog.163.com/photo/KowYYVDmqXGPCARHlpqG-g==/3730669341323339142.jpg" width=950 border=0> </A><A href="http://img.blog.163.com/photo/POVJvx31vHEjQ0givnPlSw==/2314005783538620724.jpg" target=_blank><IMG height=1250 src="http://img.blog.163.com/photo/POVJvx31vHEjQ0givnPlSw==/2314005783538620724.jpg" width=950 border=0> </A><A href="http://img.blog.163.com/photo/O9ZxKwPKJ5cMh12salpUtw==/3730669341323339132.jpg" target=_blank><IMG height=1250 src="http://img.blog.163.com/photo/O9ZxKwPKJ5cMh12salpUtw==/3730669341323339132.jpg" width=950 border=0> </A><A href="http://img.blog.163.com/photo/bxdBUiibAKFESIz4EM_gUA==/3730669341323339158.jpg" target=_blank><IMG height=1250 src="http://img.blog.163.com/photo/bxdBUiibAKFESIz4EM_gUA==/3730669341323339158.jpg" width=950 border=0> </A><A href="http://img.blog.163.com/photo/0KuQKpGtIsFjWUaG26nlFQ==/3730669341323339152.jpg" target=_blank><IMG height=1250 src="http://img.blog.163.com/photo/0KuQKpGtIsFjWUaG26nlFQ==/3730669341323339152.jpg" width=950 border=0> </A><A href="http://img.blog.163.com/photo/itD2tqjjeevPpjb_xtKqmw==/2827134666082297510.jpg" target=_blank><IMG height=1250 src="http://img.blog.163.com/photo/itD2tqjjeevPpjb_xtKqmw==/2827134666082297510.jpg" width=950 border=0> </A></MARQUEE>

</TD></TR></TBODY></TABLE>

 

清明上河图代码:

<DIV style="OVERFLOW: hidden; WIDTH: 100%"><BR><MARQUEE scrollAmount=3 width="98%"><IMG src="http://blog.163.com/photo/wBgU3HqSs3p8MHDtoNAKIg==/1134625631120665887.jpg" width=9936 high="296"></MARQUEE></DIV>

 

注:未完,将不断更新漂亮的效果图.实际操作中,如有技术问题请给我留言

 

再补充说明一下:

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.滚动图片的代码是:(向上)

<MARQUEE scrollAmount=1 scrollDelay=1 direction=up width=400 height=250>

<DIV align=center><IMG src="图片网址1" width=200 border=0></DIV>

<DIV align=center><IMG src="图片网址2" width=200 border=0></DIV>

<DIV align=center><IMG src="图片网址3" width=200 border=0></DIV>

<DIV align=center><IMG src="图片网址4" width=200 border=0></DIV>

<DIV align=center><IMG src="图片网址5" width=200 border=0></DIV>

<DIV align=center><IMG src="图片网址6" width=200 border=0></DIV></MARQUEE>

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

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

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

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

 效果图如下:

 滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使  滚动图片的制作 - 快乐天使 - 快乐天使

 原始代码如下:

 <TABLE cellSpacing=0 cellPadding=0 width=660 align=center border=0>

<TBODY>

<TR>

<TD align=middle><MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=130>

<IMG    src="http://img.blog.163.com/photo/gKtTIF1kSAvCdcKUsXrgdA==/5681009454951178571.jpg">

</MARQUEE></TD>

<TD align=middle><MARQUEE scrollAmount=1 scrollDelay=130 direction=right width=100>

<IMG  src="http://img.blog.163.com/photo/W5uaS3tsEJtI9LMeIHGEeQ==/2842334314824217381.jpg">

</MARQUEE></TD>

<TD align=middle><MARQUEE scrollAmount=1 scrollDelay=130 width=100>

<IMG   src="http://img.blog.163.com/photo/QPse7ynd7f-zaOsv50A41g==/4517391901229379667.jpg">

</MARQUEE></TD>

<TD align=middle><MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=130>

<IMG   src="http://img.blog.163.com/photo/SXqlIPow--3EPSVTjlll-w==/4849813848724649776.jpg">

</MARQUEE></TD>

<TD align=middle><MARQUEE scrollAmount=1 scrollDelay=130 width=100>

<IMG   src="http://img.blog.163.com/photo/G6T3u8IAvO8At00xCgGNiA==/4285456520419821789.jpg">

</MARQUEE></TD>

</TR>

</TBODY>

</TABLE>

 代码用法说明:

 兰色http://img.blog.163.com/photo/G6T3u8IAvO8At00xCgGNiA==/4285456520419821789.jpg为图片地址,您可以替换为自己的图片.图片地址找法:鼠标右键单击图片---属性--地址(URL)后面的地址就是。替换代码中的图片地址,即可制作出属于您自己的个性图片效果!

怎样才能实现图片在网页中的移动?

  其实很简单!你只需在选择HTML的情况下,加入以下代码就可以轻松实现。

注* 图片地址是指图片在网上的真实地址(例如下列图片的地址是:../../admin/uploadpic/200471623417878.gif

注** 代码中的参数可以自行设置,最主要的几个参数是

a.高度(height)-你可以根据图片大小来设置合适的数值;

b.方向(direction)-向上(up);向下(down);向左(left);向右(right).

c.移动速度(srcollamount)写入的数字越大速度越快。

d.scrolldely一般取10

1.图片向上移动代码:

<center><marquee align="center" behavior="scroll" direction="up" height=150 scrollamount="2" scrolldely="10"><center><img src="图片地址"></img></center></marquee>

例如:

 滚动图片的制作 - 快乐天使 - 快乐天使

2.图片向下移动代码:<center><marquee align="center" behavior="scroll" direction="down" height=150 scrollamount="2" scrolldely="10"><center><img="图片地址"></center></marquee>

例如:

 

 滚动图片的制作 - 快乐天使 - 快乐天使

3.图片向左移动代码:

<center><marquee align="center" behavior="scroll" direction="left" height=150 scrollamount="2" scrolldely="20"><center><img="图片地址"></center></marquee>

 

例如:

 

 滚动图片的制作 - 快乐天使 - 快乐天使

4.图片向右移动代码:<center><marquee align="center" behavior="scroll" direction="right" height=100 scrollamount="3" scrolldely="10"><center><img="图片地址"></center></marquee>

例如:

 

 滚动图片的制作 - 快乐天使 - 快乐天使

同理:如果在图片代码位置用文字代替,即可实现文字的移动。

 

 

 

  评论这张
 
阅读(277)| 评论(1)
推荐 转载

历史上的今天

评论

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

页脚

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