芝樱小苗:使图片在网页上滚动的方法
来源:百度文库 编辑:九乡新闻网 时间:2024/07/07 11:15:13
![](http://image23.360doc.cn/DownloadImg/2011/02/0510/8925747_138.gif)
使图片在网页上滚动的方法
制作:裁决~大树 来源:网络
![](http://image23.360doc.cn/DownloadImg/2011/02/0900/9009312_3.gif)
一、图片向左移动
代码为:
说明: 1、蓝色部分为图片向左移动代码; 2、黑色部分为插入图片代码;3、红色部分为图片地址代码。
二、图片向右移动
![](http://image18.360doc.cn/DownloadImg/2010/12/0706/7425660_2.jpg)
代码为:
说明: 1、蓝色部分right为图片向右移动代码; 2、黑色部分为插入图片和图片大小代码;3、红色部分为图片地址代码。
三、图片向上移动
![](http://image18.360doc.cn/DownloadImg/2010/12/0706/7425660_2.jpg)
代码为:
说明: 1、蓝色部分up为图片向上移动代码,“scrollAmount=4”为移动速度; 2、黑色部分为插入图片和图片大小、居中代码;3、红色部分为图片地址代码。
四、图片向下移动
![](http://image18.360doc.cn/DownloadImg/2010/12/0706/7425660_2.jpg)
代码为:
说明: 1、蓝色部分down为图片向下移动代码,“scrollAmount=6”为移动速度; 2、黑色部分为插入图片和图片大小、居中代码;3、红色部分为图片地址代码。
五、图片左右摆动
![](http://image18.360doc.cn/DownloadImg/2010/12/0706/7425660_2.jpg)
代码为:
说明: 1、蓝色部分behavior=alternate为图片左右摆动代码,“scrollAmount=10”为摆动速度; 2、黑色部分为插入图片和图片大小、居中代码;3、红色部分为图片地址代码。
六 、从中间向两边对开
![](http://image18.360doc.cn/DownloadImg/2010/12/0706/7425660_2.jpg)
![](http://image18.360doc.cn/DownloadImg/2010/12/0706/7425660_2.jpg)
代码为:
说明: 1、蓝色部分direction=right 为图片向右移动代码(默认向左),“height=120 width=360”为摆动区域大小; 2、黑色部分为插入图片代码,“width=90 height=90”为图片大小,“
为换行代码;3、红色部分为图片地址代码。
七、多张图片对开
![](http://image18.360doc.cn/DownloadImg/2010/12/0706/7425660_2.jpg)
![](http://image18.360doc.cn/DownloadImg/2010/12/0706/7425660_2.jpg)
![](http://image18.360doc.cn/DownloadImg/2010/12/0706/7425660_2.jpg)
![](http://image18.360doc.cn/DownloadImg/2010/12/0706/7425660_2.jpg)
代码为:
说明: 1、蓝色部分direction=right 为图片向右移动代码(默认向左),“width=180”为摆动区域大小,“scrollAmount=2”为移动速度; 2、黑色部分为插入图片代码,“width=90 height=90”为图片大小,“align=center”为居中代码,
为换行代码,其余为边框及数值;3、红色部分为图片地址代码。
欢迎光临大树的图书馆
花间一壶酒
独酌无相亲
举杯邀明月
对影成三人
八 、图片在图片上移动
![](http://userimage1.360doc.cn/10/0515/32/813176_20100515322250330.gif)
代码为:
说明: 1、蓝色部分中,“scrollAmount=5”和“scrollDelay=30 ”是控制移动速度的参数,“behavior=alternate”图片左右摆动代码,“width=720”为摆动区域,“scrollAmount=2”为移动速度; 2、黑色部分为插入图片代码,“ height=465 width=820”为固定图片大小,“align=center”为居中代码,“Color=#33cc33”为图片边框颜色代码,“border=0”表示框线宽度,
为换行代码,其余为边框代码;3、红色部分前为固定图片地址代码,后为移动的图片代码。
![](http://image23.360doc.cn/DownloadImg/2011/02/0510/8925747_208.gif)
![](http://image23.360doc.cn/DownloadImg/2011/02/0510/8925747_208.gif)
![](http://image23.360doc.cn/DownloadImg/2011/02/0510/8925747_208.gif)
使图片移动基本参数注解:
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(幻灯片效果,指的是滚动一次,然后停止滚动)
![](http://image23.360doc.cn/DownloadImg/2011/02/0510/8925747_208.gif)
![](http://image23.360doc.cn/DownloadImg/2011/02/0510/8925747_208.gif)
![](http://image23.360doc.cn/DownloadImg/2011/02/0510/8925747_208.gif)
一、多张图片串联式向左放映代码:
二、多张图片串联式向右放映代码:
三、多张图片串联式向上放映代码:
四、多张图片串联式向下放映代码
五、多张图片串联式来回放映代码:
说明:在图片地址处粘贴上每张图片的地址就行.
![](http://image23.360doc.cn/DownloadImg/2011/02/0900/9009312_6.gif)
',1)">
![](/images/play_bg.png)
',2)">
![](/images/play_bg.png)
![](http://image23.360doc.cn/DownloadImg/2011/01/3113/8896632_1.gif)
![](http://image27.360doc.cn/DownloadImg/2011/04/0818/10746697_61.jpg)
![](http://image27.360doc.cn/DownloadImg/2011/04/0818/10746697_61.jpg)
我的口袋推大树的日志我的图书馆木子a书馆心灵之约
博元的日志非草的书馆蓝色妖姬飞过红尘温柔细语
天地人和W水木年华稻草居人温柔女侠罗静的书馆太阳嘟嘟洮河人健君文荟多福老人水木年华香儿de博客fangxin529闲散人也音画精选祥梦缘日志
欢迎光临大树的图书馆
![](http://image22.360doc.cn/DownloadImg/2011/01/2420/8717735_80.jpg)
![](http://image22.360doc.cn/DownloadImg/2011/01/3006/8830170_47.gif)
![](http://image.360doc.cn/DownloadImg/2007/8/3/9737_651501_51.gif)
使图片在网页上滚动的方法
如何使文字与图片在日志滚动的方法
在雾化的图片上叠加滚动文字1
如何在图片上制作滚动的文字(即公
在雾化的图片上 叠加滚动文字
我的素材在图片.flash上加滚动字
在雾化的图片上叠加滚动文字
在图片上添加上下滚动文字的源代码【OK】
让文字与图片在日志滚动的方法
一学就会:让文字与图片在日志滚动的方法
一学就会:让文字与图片在日志滚动的方法
一学就会:让文字与图片在日志滚动的方法
一学就会:让文字与图片在日志滚动的方法
网页制作里怎样使滚动图片首尾连接起来
在图片上添加FLASH的方法
如何在图片上制作滚动的文字(即公告栏的制作)1
如何在图片上制作滚动的文字(即公告栏的制作).
如何在图片上制作滚动的文字(即公告栏的制作)
[转] 一学就会:让文字与图片在日志滚动的方法2
[转] 一学就会:让文字与图片在日志滚动的方法
文字在图片上向上滚动代码_
文字在图片上向上滚动代码_
简现单实网页图片无缝滚动代码
简单实现网页图片无缝滚动代码