多语言展示
当前在线:248今日阅读:176今日分享:34

移动相册的制作方法

本相册是利用利用7张图片不同的移动速度,形成叠加、发散、飘逸、立体的效果,给人以缤纷多彩的感觉,适合营造欢乐、欢庆气氛。
工具/原料
1

博客

2

一组代码:

<marquee style="WIDTH: 100%" scrollamount="7" scrolldelay="30" height="362"><img src="图片1" width="522"></marquee>

<div style="MARGIN-TOP: -324px; MARGIN-LEFT: 0px">

<marquee style="WIDTH: 100%" scrollamount="6" scrolldelay="30" height="362"><img src="图片2" width="552"></marquee></div>

<div style="MARGIN-TOP: -324px; MARGIN-LEFT: 0px">

<marquee style="WIDTH: 100%" scrollamount="5" scrolldelay="30" height="362"><img src="图片3" width="522"></marquee></div>

<div style="MARGIN-TOP: -324px; MARGIN-LEFT: 0px">

<marquee style="WIDTH: 100%" scrollamount="4" scrolldelay="30" height="362"><img src="图片4" width="522"></marquee></div>

<div style="MARGIN-TOP: -324px; MARGIN-LEFT: 0px">

<marquee style="WIDTH: 100%" scrollamount="3" scrolldelay="30" height="362"><img src="图片5" width="522"></marquee></div>

<div style="MARGIN-TOP: -324px; MARGIN-LEFT: 0px">

<marquee style="WIDTH: 100%" scrollamount="2" scrolldelay="30" height="362"><img src="图片6" width="522"></marquee></div>

<div style="MARGIN-TOP: -324px; MARGIN-LEFT: 0px">

<marquee style="WIDTH: 100%" scrollamount="1" scrolldelay="30" height="362"><img src="图片7" width="522"></marquee></div>

方法/步骤
1

准备图片素材。下面是举例用图片。

2

获取图片地址。如是网站、博客已有图片,右击图片,点“属性”,复制图片地址备用。如是自己拍照,按照步骤和提示,在博客上传获得图片地址。

3

编辑。1、进入博客后台,并处于代码编辑状态,将本文“工具/原料”中给的那组代码复制,状态到编辑器;2、将本文第二步获取的图片代码,逐一粘贴至“图片1-7”那里。预览,成功了。

4

改变。改变7张图片的移动速度,会出现不同的效果,试试看吧。方法:调整scrollamount的值(共7处)

5

加边框、加音乐。(这里不做具体介绍)

推荐信息