3ce的指甲油味道:图片移动特效制作与代码

来源:百度文库 编辑:偶看新闻 时间:2024/04/28 01:04:48
互做友情连接点此进入
金峰博客欢迎你


1.图片向上移动效果图:



1.图片向上移动效果代码:






2.图片向下移动效果图:



2.图片向下移动的效果代码:






3、图片向右移动的效果图:
3、图片向右移动的效果代码:





4.图片向左移动的效果图:4.图片向左移动的效果代码:




5.图片来回移动效果图:5.图片来回移动效果代码:





6.图片居中向两边移动的效果图:6.图片居中向两边移动的效果代码:






7.图片居中上下分开移动效果图:




7.图片居中上下分开移动的效果代码:

8.图片对开移动的效果图:
8.图片对开移动的效果代码:












9.由上至下隐现效果图:
9.由上至下隐现效果代码:


10.由下至上隐现效果图 :
10.由下至上隐现效果代码 :




代码中的各参数详解      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:粉色地方是图片地址,换上自己喜欢的图片。

代码语言分析解释:
1.背景颜色地方 表示效果中限制的图片大小值,width=宽 height=高
2.scrollAmount=3地方表示滚动速度 其中3表示数值 数值1到6 默认为6  提示:1到3为最佳效果。
3.width=240表示图片的宽度 参照图片大小修改 以上效果演示图宽=240
4.height=320表示图片的高度 参照图片大小修改 以上效果演示图高=320
5.粉色地方表示图片的地址 可以替换你喜欢的图片地址 如以上代码的图片地址 图片地址1 图片地址2 图片地址3等均为图片地址 表明 1.2.3.是为了有些效果中有些相同的图片.有些特效想多加图片数量,只需要将: 这组代码加在代码:
前面就可以了,需要几幅就加几组。
最后 代码的演示还要自己亲自动手去体会,有许多技巧需要朋友们在制作中去参悟和修改。
刚刚接触博客的朋友需要注意的是:复制粘贴代码时,一定要在代码编辑状态下进行。
金峰博客欢迎你
',1)">