您好,欢迎来到10博官网工艺五金有限公司官网!

迎合行业需求 满足个性定制

免费服务热线:4006-825-828

联系10博官网Contact

10博官网_10博体育_十博体育app
免费服务热线:4006-825-828
电话:18365625186 邮箱:admin@yiguishidapinpai.com
地址:广东省广州市天河区88号
当前位置:主页 > 产品展示 >

产品展示

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

作者:admin 时间:2020-06-20 08:07

  应用过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小米网易等著名互联网公司产物总监和运营总监,他们正在这里与你一块滋长。