当前位置:文档之家› 网页中滚动多张图片特效

网页中滚动多张图片特效

网页中滚动多张图片特效
网页中滚动多张图片特效

注意: 各参数详解:

(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.图片居中向两边滚动代码:

7.图片居中上下分开滚动代码:

8.图片居中上下靠拢滚动代码:

效果:

以上6、7、8双向滚动代码说明:

1.绿色地方“width=220 height=200”表示滚动范围的宽和高度,

尤其宽度绝对要参对图片的宽度来调整。

2.为什么要区分图片地址的1和2,这是因为要说明如果做好这个对图效果,

则需要所有的图片地址1都放相同图片,图片地址2也是要对齐2的图片,

如果要添加图片,则需要上下图片对应添加。

比如:添加图片地址3后代码显示:

9.图片设定百叶窗式对开滚动代码:

代码说明:

1.“borderColor=#FF00CC”表示边框颜色,颜色码:FF00CC

去掉“borderColor=#FF00CC”表示默认为白色

2.“width=110”表示图片滚动范围的宽度、最好调整为1张图片宽度的一半。

3.“cellSpacing=2”表示表格线的距离为2,本人认为最佳值为1到3。

4.“border=2”表示边框外格线的宽度为2、可以调整。

网页特效CSS大全

HTML网页特效CSS大全 css属性代码大全 一CSS文字属性: color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白 三、CSS符号属性: list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/

dreamweaver图片展示特效代码

6

js脚本结束 4。简单的页面加密