当前位置: 首页> 企业站SEO

Axure教程:商品图片放大效果制作步骤详解(简版)

发布时间:2019-12-28

商品图片,在鼠标移到就有放大的效果,这就情况该如何实现?

学习做京东∑、淘宝等购物网站,鼠标移入商品图片上就有放大的效果,如何实现:

选中商品小图,显示对应的商品中图(简版▀不做说明) 鼠标移动到商品中图,鼠标跟随框显示并始终跟随,移出商品中图则隐藏 鼠标移动到商ω品中图,商品大图显示δ并移动到指定位置 ♣

一、元件布局

涉及的元件主要是图片,商品图·片从网上下载高清▕大图,用图片处理™软▉件,将商品大图设为800*800规格,商品中图为∝400*№40ǐ0规格,商品小图设为50*50规格。ↈ

中图和小图如上图布局后,在中图旁边添加⿺动态面γ板800设置为400*400规格,将商品大图放入state1里,在商品中图上添加矩形200*200规格,重命名为鼠标跟随,设置不透明度24%,─━颜色粉色,商品图片按照规格重命名。

将鼠标跟随和商品大图默认设置为隐藏,如图中☠两处可以设置。

二、添加事件

(1з)选中商品小┎图,显示对应的商品中图(简版不做说明)

(2)鼠标移动到商品中图,鼠标跟随Ⅻ框显示并始终跟随,移出商品中图则隐藏

先设置条件,鼠标移动时,有交互效果的范围,就在商品中图范围内,设置坐标的边界。函数cursor.x或者y,是指鼠标的x轴y轴的坐标,为全局变量可以从中∮选到或者直接输入使用,不用定义。局部变量为商品中图,他有上下左右4个属性。具体范围如图示设置。

注:最后一个条件,动态面板800的面板状态为state1,是为了多图切换用,简版不做切换不加也行。

情形添︵加后,下方会有添加按钮,点击添加元件显示动作,选择鼠标跟随矩形〾显示即可,鼠标移出隐藏在最后所有情形之外设。

添加动作移动,目标选择鼠标跟随,此处为了设置矩形跟随鼠标移┕动的位置,因为鼠标位于矩形的中间,矩形的定位点在左上角,有位置差。

到达的x轴=鼠〇标xΘ轴-鼠标跟随的宽的一半,因∞为目标已经是鼠标跟随矩形,所以用了target全局变量,他的属性是宽和高。同理得►y轴坐标,边界同鼠标$。

(3)鼠标移动到商品中ч图,商品大图显示并移动到指定位置

添加动作显示,选择目标动态面板800显示,一般商城商品中图旁边会有商品的信息,此时商品大图显示后要选择⊙置于顶层,添加动作移动,注意此处目标ↁ选择动态面板state1里面的图片,如果是多图,则设置多个状态(state)每个里面单独放商в品大图,跟情形★里Δ▓面的面板状态对应选择。

商品大图到达的位置应该∞为鼠标跟随矩形坐标到商品中图坐标的倍数,这个倍数等于商品大图/商品中图,为了简化设计一开始制作就设为了2倍大。因为商品大图在state1的移动位置是跟鼠标逆向的,X和⿶Y轴坐标都应该为η负。

到达X坐标:-[[(LVAR2.x- LVAR1.x)*2 ]]同理得Y坐标: -[[(LVAR2.y- LVAR1.y)*2 ]]

为了不混淆,LVAR1还是跟之前的局部变量一样,为商品中图≈,LVAR╨2为鼠标跟随矩形。

全部设置完毕后,最后增加如果非任何一种情况,则隐藏矩形和动态面板。

注意:条件添加选项框┖¤什么都不用填,直接确定即可。

 

本文由 ╥@粉小妞Hol◤ly 原创发布于人人都是产品经理Ⅳ。未经许可,禁止转载

题图来自U❤☜nsp⊙l§ash,基于CC0协〓议