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

.

.

 
 
 

日志

 
 

多样式的滚动图片  

2008-12-26 16:46:30|  分类: 滚动图片的制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

    通过上面的二次讲解,你或许对滚动图片的制作己有了初步的了解并从中悟到代码的神通广大.

    其实,通过修改对应及添加不同的代码,我们就会得到不同式样的滚动图片的.比如图片从左到右移动、图片从右到左移动或是图片左、右来回移动等等效果.

    接下来,我们就来先看一下:通过改变或添加原代码中的部分代码后,分别得到的几种不同的滚动效果图.还是从单张滚动的图片讲起吧!

                 一、单张图片滚动原代码如下:

<MARQUEE scrollAmount=4 scrollDelay=60 direction=left width=740 height=260><IMG src="http://blog.163.com/photo/wBgU3HqSs3p8MHDtoNAKIg==/1134625631120665887.jpg" ></MARQUEE>

        单张图片的滚动效果图:

多样式的滚动图片 - hdly006502 - .

 

               二、多张图片滚动的几种方式:

原始代码:

<MARQUEE scrollAmount=4 scrollDelay=60 direction=left width=740 height=60>

<IMG src="http://img.blog.163.com/photo/jGzzpk-uqTbYmIAZUmxnqw==/2012827558459087043.jpg" >

<IMG src="http://img.blog.163.com/photo/XzZKJ3jegXwuEMPVkqN-_g==/2012827558459087044.jpg" >

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

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

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

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

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

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

<IMG src="http://img.blog.163.com/photo/_DN8jcQu2nahNwwqK71-fQ==/2324138882701012488.jpg" >

<IMG src="http://img.blog.163.com/photo/e5ZnQMjedCLgwQKWbCXLKQ==/2324138882701012489" >

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

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

</MARQUEE>

 

说明:

1、图片的多少可自由添加,只要把图片地址换成你所选图片地址就行;

2、上面代码中的图片为本人所选的一组十二生肖图案,看下面的效果图.

3、代码中的红色部分为十二张生肖图片的地址,你可以自由换取.

                          多张图片的几种滚动效果图:

 

一、多张图片从右侧到左侧滚动效果如下:

多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - .

二、多张图片从左到右移动效果图:

多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - .

三、多张图片左、右来回移动效果图:

多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - .

四、多张图片从上到下移动效果图:

2008年12月25日 - hdly006502 - .
2008年12月25日 - hdly006502 - .
2008年12月25日 - hdly006502 - .
2008年12月25日 - hdly006502 - .
2008年12月25日 - hdly006502 - .
2008年12月25日 - hdly006502 - .
2008年12月25日 - hdly006502 - .

五、多张图片从下到上移动效果图:

2008年12月25日 - hdly006502 - .
2008年12月25日 - hdly006502 - .
2008年12月25日 - hdly006502 - .
2008年12月25日 - hdly006502 - .
2008年12月25日 - hdly006502 - .
2008年12月25日 - hdly006502 - .
2008年12月25日 - hdly006502 - .

六、大图片中小图的移动效果图:

多样式的滚动图片 - 寒冬腊月 - .

博客新手的学堂
枝术交流的平台
寒冬腊月与你通行
在网络的天空中!

 七、多张图片屏风合开式移动效果图:

多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - . 多样式的滚动图片 - hdly006502 - .
  评论这张
 
阅读(2142)| 评论(12)
推荐 转载

历史上的今天

评论

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

页脚

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