网页中滚动多张图片特效
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
注意: 各参数详解:
(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(幻灯片效果,指的是滚动一次,然后停止滚动)
(6)蓝色地方是图片地址,可以换上自己喜欢的图片。
向上循环
效果:
2.图片向下循环滚动代码:
3.图片向左循环滚动代码:
4.图片向右循环滚动代码:
效果:
5.图片来回滚动代码:
以上五种图片滚动效果代码说明:
1.“width=380”表示滚动的宽度范围,数值可以按自己喜欢的调整
2.“height=275”表示滚动的高度范围,数值可以随意调整
3.“scrollAmount=3”表示滚度速度为3,1到3为最佳数值,默认为6
4.“height=275”表示图片的高度为275
(建议按自己喜欢的图片高度调整)
5.“width=220”表示图片的宽度为220
(建议按自己喜欢的图片宽度调整)
6.“图片地址”表示图片的属性地址粘贴处
(因本人太懒,所以所有的滚动图片都只用一张代替;(*^__^*),当然,
每个“图片地址”都可以换上不同的图片地址,效果会更好。)
下面我们说说图片的添加:
首先:
表示一张图片的粘贴代码,如果要增加或减少一个图片,则是添加或删除一段这个代码就ok了。
那么:如何添加?
其实只要把这段代码放在相同的代码后面或前面就可以了。
6.图片居中向两边滚动代码: