中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在閱讀粉小妞Holly的《Axure教程：商品圖片放大效果制作步驟詳解（簡版）》文章后，發(fā)現(xiàn)跟自己的Axure8.0版本不一樣，因此，根據(jù)教程及本人理解后，給讀者補(bǔ)交另外一篇教程；在此，感謝粉小妞Holly作者的分享。

效果如下：

一、頁面布局

（1）拉入一張大小為400*400和800*800的照片；分別命名為小圖和大圖，并將大圖轉(zhuǎn)為動態(tài)面板，命名為放大窗口，大小設(shè)置為400*400。

（2）再拉入一個(gè)矩形，背景色填充為粉紅色，20%的透明度，大小為200*200，并命名為放大鏡，如下圖所示：

二、設(shè)置全局變量

不選中頁面任何元素，添加【頁面載入時(shí)】事件，利用全局變量來控制大圖的實(shí)際應(yīng)該移動距離，即通過大圖的寬度除以小圖的寬度，得到放大的倍數(shù)。此全局變量在后面的移動距離計(jì)算公式中需要用到，設(shè)置如下圖所示：

三、添加交互

選中【小圖】，添加【鼠標(biāo)移動時(shí)】交互效果。

（1）設(shè)置顯示效果

元件》顯示》勾選放大鏡和放大窗口，設(shè)置為顯示，如下圖所示：

（2）設(shè)置移動效果

當(dāng)鼠標(biāo)移入到小圖時(shí)，放大鏡矩形的中心點(diǎn)需要立即跟隨移動到鼠標(biāo)位置，因此，設(shè)置交互事件如下：

1）元件》移動》勾選【放大鏡】矩形，移動為：絕對位置，X軸為：[[Cursor.x-Target.width/2]]，即鼠標(biāo)的x軸減去放大鏡的一半寬度；Y軸為：[[Cursor.y-Target.width/2]]，即鼠標(biāo)的Y軸減去放大鏡的一半寬度。

如下圖所示：

2）添加邊界，頂部為：>=[[LVAR1.top]]，點(diǎn)擊【fx】,添加局部變量，如下圖所示：

同理，底部為：<=[[LVAR1.bottom]]；左側(cè)為：>=[[LVAR1.left]]；右側(cè)為：<=[[LVAR1.right]]。

接下來則設(shè)置放大窗口中的大圖移動效果：

3）元件》移動》勾選【大圖】矩形，移動為：絕對位置，X軸為：[[(LVAR1.x-LVAR2.x)*OnLoadVariable]]，即小圖的x軸減去放大鏡的x軸得到的距離，再乘以放大倍數(shù)（前面設(shè)置的全局變量）；Y軸為：[[(LVAR1.y-LVAR2.y)*OnLoadVariable]]，即小圖的y軸減去放大鏡的y軸得到的距離，再乘以放大倍數(shù)。

如下圖所示：

（3）設(shè)置移出隱藏效果

注意：如果將【鼠標(biāo)移出時(shí)】隱藏放大鏡和放大窗口的效果加在元件【小圖】上面的話，由于，鼠標(biāo)剛移入小圖時(shí)，放大鏡顯示，遮住下面的小圖，導(dǎo)致觸發(fā)移出事件，使放大鏡和放大窗口隱藏。

因此，只能將【鼠標(biāo)移出時(shí)】隱藏放大鏡和放大窗口的效果加在元件【放大鏡】上面。添加后的效果如下圖所示：

仔細(xì)觀看效果，會發(fā)現(xiàn)，鼠標(biāo)剛移小圖時(shí)，放大鏡和放大窗口能夠正常顯示。但是，當(dāng)鼠標(biāo)還是在放大鏡區(qū)域移動時(shí)，放大窗口里面的大圖并沒有移動。而鼠標(biāo)移出放大鏡區(qū)域時(shí)，大圖才跟著移動。

因此，還需要給放大鏡添加與小圖一樣的【鼠標(biāo)移動時(shí)】交互效果，才能平滑正常顯示。

交互設(shè)置如下圖所示：

四、預(yù)覽效果

學(xué)習(xí)更多教程，可關(guān)注本人公眾號：艾斯的Axure峽谷。歡迎大家留言評論，也可以留下你期待看到的交互效果。

示例下載：

鏈接:?https://pan.baidu.com/s/14VlNTGhqgkbjLSm7iou2qA

提取碼: nf1f

示例演示：

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議