原来这篇日志只发了几组效果图，现在大家都说不懂想学，
今天我就来作个简单的说明，希望大家能看懂！ |
下面是原图，为了不占地方我缩小了，原图是700*750 
|
效果图一 |
效果一代码如下 <div style="MARGIN: 10px 10px 0px 100px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-img-idx="7" data-src="图片地址"></div>
<div style="MARGIN: -668px 0px 0px 150px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-img-idx="8" data-src="图片地址"></div>
<div style="MARGIN: -668px 0px 0px 200px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-img-idx="9" data-src="图片地址"></div>
<div style="MARGIN: -668px 0px 0px 250px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-img-idx="10" data-src="图片地址"></div>
<div style="MARGIN: -668px 0px 0px 300px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-img-idx="11" data-src="图片地址"></div></td>
|
| 效果图二 |
|
效果二代码如下 <div style="MARGIN: 300px 0px 0px 300px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-src="图片地址" data-img-idx="2"></div>
<div style="MARGIN: -668px 0px 0px 250px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-src="图片地址" data-img-idx="3"></div>
<div style="MARGIN: -668px 0px 0px 200px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-src="图片地址" data-img-idx="4"></div>
<div style="MARGIN: -668px 0px 0px 150px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-src="图片地址" data-img-idx="5"></div>
<div style="MARGIN: -668px 0px 0px 100px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-src="图片地址" data-img-idx="6"></div></td>
|
这是我去掉了里面图片的代码 <div style="MARGIN: 300px 0px 0px 300px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="同一张图片地址" data-src="同一张图片地址" data-img-idx="2"></div>
<div style="MARGIN: -668px 0px 0px 250px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="同一张图片地址" data-src="同一张图片地址" data-img-idx="3"></div>
<div style="MARGIN: -668px 0px 0px 200px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="同一张图片地址" data-src="同一张图片地址" data-img-idx="4"></div>
<div style="MARGIN: -668px 0px 0px 150px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="同一张图片地址" data-src="同一张图片地址" data-img-idx="5"></div>
<div style="MARGIN: -668px 0px 0px 100px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="同一张图片地址" data-src="同一张图片地址" data-img-idx="6"></div></td>
|
代码说明： 红颜色代表：组图的样式变化 蓝颜色代表：定位 紫颜色代表：图片地址 浅蓝颜色代表：排列的顺序
和密度（间距）， 在制作当中你喜欢的图片
不一定就是我这种图片的大小
那么就需要你自己按我说的那些调整数值， |
如果精通代码的是可以调整出很多种样式的，
废话就不多说了，在这里我就以两组不同的
图片为例，附有代码应该都懂的，上面两种图片
如果大家喜欢就在我相册里拿 如有不懂在本日志下留言，我会回复的 不要发聊天窗口，弹出来的对话框太多 我一般不看关掉了，对不起！见谅！ |
素材/网络 制作/浅浅舞
|
|
文章评论
碧海云天
[em]e160[/em] [em]e142[/em] [em]e179[/em] [em]e177[/em] 第一次看见这样的图片，美轮美奂！
《 惜缘梦》*
[em]e1000058[/em]
空谷幽兰/mg
[em]e163[/em] 还没见过这种特效代码呢，问候老师[em]e178[/em]
空谷幽兰/mg
[em]e163[/em] 看望老师[em]e178[/em]
平安人生
老师怎么制作滴，好神奇！ [em]e179[/em] [em]e179[/em] [em]e142[/em] [em]e142[/em]
水蓝烟【拒聊】
陌蝶，真是大开眼界，打心眼里佩服[em]e179[/em][em]e179[/em][em]e179[/em][em]e179[/em][em]e179[/em]
沙漠/mg玫瑰
[em]e163[/em][em]e178[/em]师傅早点睡，注意身体
宇宙北斗【离网】
姐姐做的漂亮，[em]e163[/em] [em]e183[/em] [em]e179[/em]
緑葉飛僊
才女！！太棒了！
汤圆【拒聊】
[em]e179[/em] [em]e179[/em] 我喜欢老师的风格，很清爽。[em]e160[/em] [em]e160[/em] [em]e163[/em] [em]e163[/em]
女人如歌【淡网】
好漂亮的效果 [em]e179[/em]
喜鹊
[em]e177[/em] [em]e160[/em] [em]e183[/em]
艾雅
美呆了，拿走了!
艾雅
美呆了，拿走了!
艾雅
我是喜欢玩代码的，才女能否将图片效果弄成移动效果不是更锦上添花!