产品展示

您的当前位置:主页 > 产品展示 >

Axure教程|淘宝网商品图片放大镜效果制作凤凰玩

发布时间:2020-06-20 23:30
分享到:

  运用过PC端淘宝的人都真切,正在淘宝商家的商品显示中有放大镜的功用,大略来说即是假若用户将鼠标安插正在图片上,图片的一个区域就会被放大。然后显示正在右边,这个功用能够让用户更好的看商品的细节,也比拟好玩。

  本日咱们来日显示这个成果,axure制制这个功用并不是很困穷,起码比作家之前的小逛戏容易太众了,此中独一用到的高级功用即是函数,且都是直接运用,没有杂乱的全体变量以及触发面板。

  最初须要收罗所用到的图片,本例子中的图片能够大意找,只消可以分明的反映放大前后的区别就能够,放大区域标注的图片直接从淘宝中举办截屏。

  放大显示区域和放大区域的巨细是相同的,均成立为250*250,然后将该区域成立为动态面板。进入动态面板将此中的图片成立为500*500。

  如此根本就竣工了举座组织,不外咱们要的显着不是一个静止的图片,凤凰玩彩平台还须要让它跟着放大区域的区别而产生搬动。

  上述条目的有趣为当鼠标进入被放大区域的时辰,bfdp图片坐标定位为(鼠标x坐标-62,鼠标y坐标-62)。这种成立也有必定的题目,即当该图片扈从鼠标的时辰,鼠标将会失落接触被放大区域的机遇,如此搬动就会失效。为了保障搬动的成果,再追加一条成立。

  如此,该区域就会跟着鼠标举办搬动了,当然,如此也弗成,由于凭据淘宝的情形,这个区域不行以移出必定的范畴,显着只承诺正在图片中举办搬动。因此成立一下其界限条目。

  如此,该放大区域跟着鼠标举办搬动的设定就结束了,这个时辰,只消搬动鼠标,该区域就会跟着鼠标举办搬动了,且不会分开图片所正在的区域。

  上面的成立固然依然结束了放大区域的鼠标扈从,然则放大结果仍旧不会产生改观的。为了竣工放大结果的改观,咱们须要剖释放大结果到底是什么。

  放大结果是正在固定的区域显示的,因此动态面板的运用必不行少。其次,放大结果是跟着放大区域的改换而改换的。因此放大结果的图片坐标,是放大区域所正在职位的函数,如此咱们就能够举办成立了。

  成立的办法极度大略,如上所示,即让放大结果成为放大区域坐标的函数就能够了,此中LVAR1这个限度变量指代的即是放大区域。

  实情上,现正在依然能够竣工成果了,然则放大区域以及放大结果是向来存正在的,如此显着和淘宝的情形是不适当的,因此咱们将其齐备障翳起来。

  当然是鼠标搬动进入图片的时辰了,当然,假若鼠标再次分开图片咱们应当让这些区域再一次改观为障翳。

  通过上面的办法,咱们凯旋制制了一个放大镜的成果,这个案例的紧要操作重心正在于放大区域和放大结果的鼠标扈从,因此重难点即是鼠标坐标相合函数的运用。

  期望行家可以有所劳绩,该实例仍旧比拟有效的, 正在良众网页中都能够用作商品显示。

  马璐,人人都是产物司理专栏作家。合心产物打算以及用户体验,力图正在技能必定的情形下将产物做到极致,充塞外现技能的潜能。

  对,你也能够加我微信,我直接发给你。不是为了获利,是找个网站托管罢了。mlttxsh是我的微信号码。

  bfdp图片坐标定位为(鼠标x坐标-62,鼠标y坐标-62),这个坐标如何来的呢?

  对,你也能够加我微信,我直接发给你。不是为了获利,是找个网站托管罢了。mlttxsh是我的微信号码。

  你好,你是用什么办法让咱们能正在电脑上点击你给的链接就能查看原型图,我也思把我自身的原型图上传到电脑,不须要当地文献就能够查看

  求问第三条放大区域的鼠标扈从中,“鼠标将会失落接触被放大区域的机遇,如此搬动就会失效。为了保障搬动的成果,再追加一条成立。”这里追加的成立是什么?

  你好,我不是产物司理,然则对这个AXure很感兴味,请问我去探求为什么没有显示?感谢哈

  人人都是产物司理(是以产物司理、运营为焦点的研习、相易、分享平台,集媒体、培训、社群为一体,全方位效劳产物人和运营人,设立9年举办正在线+期,线+场,产物司理大会、运营大会20+场,笼罩北上广深杭成都等15个都邑,好手业有较高的影响力和出名度。平台汇集了繁众BAT美团京东滴滴360小米网易等出名互联网公司产物总监和运营总监,他们正在这里与你一块发展。

联系凤凰玩彩平台

地址:上海市闸北区永兴路258弄1号兴亚广场1706室
电话:021-63212618
传真:021-63282858
邮箱:admin@ntzzhq.com