喜欢的童鞋可以留邮箱给大家发原型奥！
效果简介
网页版淘宝，小方块随着鼠标的移动而移动，右侧显示小方块在左侧图片的放大部分，效果如下图。
效果图
步骤
动画大体上分为两部分：
第一部分，小方块随着鼠标的移动而移动；
第二部分，右侧放大图显示小方块所在区域的内容。
(先介绍第一部分）
1、找图，贴图。
找一张喜欢的图片贴上去（最喜欢艾斯了），大图设置为400x400；中间的小图设为160x160，黑色，透明度8。艾斯大图名称“datu”，透明小图名称“xiaotu”。
<可以想一下为什么要设置为400x400，160x160，评论回答~>
贴图
2、让xiaotu随着鼠标的移动而移动。
可以想一下，鼠标在datu的范围内走到哪儿，xiaotu就跟到哪儿，所以应该在datu上添加【鼠标移动时】事件。
2.1 步骤示意图
“xiaotu随鼠标移动”的过程，转化为公式就是“使得xiaotu的中心的坐标和鼠标的坐标重合”，关系式为【鼠标.x = xiaotu.x + xiaotu.width/2】【鼠标.y = xiaotu.y + xiaotu.height/2】。
f(x)和f(y)的值分别为：
f(x)的值
f(y)的值
target：目标。
【鼠标移动时】事件作用在datu上，而移动的是xiaotu，所以xiaotu就是目标元件。
鼠标的坐标为（Cursor.x，Cursor.y）
理解不了target的，还可以用这种方式，效果一样但更好理解：
把xiaotu设置为局部变量
3、到目前为止xiaotu随着鼠标的移动而移动的效果已经出来，但还存在两个问题，①由于没有设置移动范围，鼠标超出datu的范围，xiaotu也会跟着跑出去；②xiaotu虽然会随着鼠标的移动而移动，但因为鼠标是作用在datu上的，而xiaotu覆盖在datu上，鼠标在xiaotu上面，所以中间的xiaotu层阻断了鼠标和datu的接触。造成鼠标在xiaotu范围内无论怎么移动xiaotu都不会移动，只有鼠标移出xiaotu的范围，xiaotu才会跟随鼠标移动。如图(原谅我的拍照技术)：
第一个问题
第二个问题
有了问题就来解决问题，一个一个来~
①超出范围的问题。
超出范围是指xiaotu超出datu上、下、左、右的边框，所以只要给xiaotu设置范围就行：
e.g.如果xiaotu的左边框超出datu的左边框，则将xiaotu左边框和datu左边框对齐，xiaotu高度保持不变。其余三条边框同理。
转化为关系式就是：
左：if(xiaotu.x < datu.x )，则移动xiaotu的位置到（datu.x，xiaotu.y）;
右：if(xiaotu.right > datu.right )，则移动xiaotu的位置到（datu.right - xiaotu.width ，xiaotu.y）;
上：if(xiaotu.y < datu.y )，则移动xiaotu的位置到（xiaotu.x，datu.y）;
下：if(xiaotu.bottom > datu.bottom )，则移动xiaotu的位置到（xiaotu.x，datu.bottom-xiaotu.height）。
同样在datu上添加【鼠标移动时】事件，点击【添加条件】，
左边界添加条件示例
点击【确定】设置好条件，移动xiaotu，如图：
【鼠标移动时】事件
注意切换 if 、else if，全部切换为 if 条件。
②鼠标在xiaotu范围内，xiaotu不随着移动的问题。
核心问题就是，xiaotu层不能阻挡鼠标在datu上的移动，但又不能把datu覆盖在xiaotu上。所以解决办法就是再在xiaotu上覆盖一层透明图，大小和datu一样，然后把datu上的【鼠标移动时】事件复制到透明图上。
覆盖透明层
这样就可以啦！
4、接下来就是右侧的放大图显示区（名称fangdaqu）。
它体现出来的过程是，xiaotu移到哪儿，右侧fangdatu显示区就显示哪个部位。换成逻辑来想，在这个例子中，xiaotu尺寸为160x160，datu尺寸为400x400，右侧fangdaqu尺寸为400x400，也就是要把160x160的图片全屏显示在400x400的画面上，放大2.5倍。右侧显示区只显示被xiaotu覆盖的放大部分，可以得到一个比例算式：（边长之比）
xiaotu:datu = fangdaqu:最大图，得到160:400 = 400:最大图，所以最大图长为1000。
我们放动态面板作为显示区，动态面板大小为400x400，点击进入，放图片，将其尺寸设置为1000x1000，如图：
右侧放动态面板
动态面板中图片
放大显示的过程，其实就是zuidatu随着xiaotu有规律移动的过程。在这个例子中，xiaotu向右移动1个单位，zuidatu就要向左移动2.5个单位。所以鼠标移动的过程是作用在xiaotu上的。所以zuidatu移动的距离为：
x轴：（datu.x - xiaotu.x）*2.5。
y轴：（datu.y - xiaotu.y）*2.5。
X轴移动示例
注意：
不是【鼠标移动时】事件，是【移动时】事件！！！！【移动时】【移动时】！！！重要的事情说三遍，因为我写的时候感觉逻辑没毛病啊，为啥就是不移动咧！就是因为我用了【鼠标移动时】事件了！
到此为止，放大的效果已经出来了，如图：
放大效果
5、最后一步，添加小图切换效果。这个要用到中继器。
点击中继器，将原有的删除，替换成图片，如图：
中继器
然后回到首页，点击中继器，将中继器的布局设置为“水平”，如图：
设置布局方式为“水平”
6、添加要切换的图片，点击属性（要显示的图片是三个尺寸，第一个是左下中继器切换的60x60的小图，第二个是左上的400x400的datu，第三个是右边1000x1000的fangdatu）。横向添加3种格式的图片，第一列为序号。每一行导入的图片是相同的，想切换几张图片，就添加几列，在这儿演示常见的切换四张图片的。选中某一个，右击“导入图片”，就可以添加想要的图片，如图：
添加图片
设置完成后，如图：
图片添加完毕
然后点击“中继器”，设置【每项加载时】事件，设置小的切换图片，如图：
设置切换图片
设置完成后的效果就是这个样子，如图：
切换小图效果图
7、我们要的效果是，点击每一张小图，datu和fangdatu都跟着变化，所以，在中继器点击进入的图片上添加【鼠标单击时】事件，如图：
添加【鼠标单击时】事件
进入【鼠标单击时】事件，点击【设置图片】，然后设置datu和zuidatu的图片，如图：
设置zuidatu和datu的图片
到此，基本效果已经出来，如图：
基本效果图
8、但有些小细节还没有优化，比如左下的每个切换小图之间要间隔一点距离才好看；比如只有当鼠标移到datu上时，xiaotu才显示，右侧的放大图也才在此刻显示。
先优化第一个，回到主页，点击中继器，如图：
设置间隔
再优化第二个问题，在datu上添加【鼠标移入时】事件，当鼠标移入datu范围时，xiaotu和zuidatu显示；再添加【鼠标移出时】事件，当鼠标移出datu范围时，xiaotu和zuidatu隐藏。
9、终于写完啦！写了将近两个礼拜的零碎时间啊！
网友评论