上海白癜风QQ交流群 http://liangssw.com/bozhu/12376.html不知道大家在做原型过程中是否通常会遇到一些想要的交互效果，可是呢又做不出来，那就很难过。没关系，我们慢慢的熟悉，今天分享一个把图片局部放大的交互——“放大镜”效果。第一步：摆放好相应的组件，还有一张自己喜欢的图片选择一张大小为×的图片，命名为“小图”，也可以自己设置尺寸，适中就好；一个×的矩形，设置为黄底黄边，不透明度30%左右，初始状态设置为隐藏（不要遗漏这一步），命名为“放大镜”，放置在“小图”的右下角；一个×的动态面板（注意：动态面板尺寸与“小图”一致），初始状态设置为隐藏，命名为“放大窗口”，放置在小图的右边，可以紧靠“小图”，并且在state1面板状态中放置一张×的图片（注意：与“小图”为同一张图片，尺寸设置最好与“小图”等比例），命名为“大图”。现在所有组件摆放完毕，然后添加用例。第二步：添加整体页面载入时用例在用例中设置全部变量OnLoadVariable为，大小图的宽度比例（注意：index页面什么组件都不选中的情况下设置用例）。第三步：为“放大镜”添加鼠标移动时用例用例中有两个动作：绝对移动“放大镜”，x轴移动到，y轴移动到，并且左侧、右侧、顶部和底部的边界分别为“小图”的左侧、右侧、顶部和底部。绝对移动“大图”，x轴移动到，y轴移动到。设置完移动“放大镜”的动作后继续添加移动“大图”的动作，移动“大图”不需要添加边界设置。第四步：为“小图”添加鼠标移动时用例该用例与“放大镜”的鼠标移动时用例一样，这样直接复制粘贴过来就可以用了。第五步：为“小图”添加鼠标移入时用例（注意是移入时用例）该用例有两个动作：一个显示“放大镜”；另一个显示“放大窗口”。这样就设置好了，第三步是比较复杂的，有很多变量要设置，所以要细心一点才可以喔。
转载请注明地址:http://www.1xbbk.net/jwbfz/7991.html
