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

使用過PC端淘寶的人都知道，在淘寶商家的商品展示中有放大鏡的功能，簡(jiǎn)單來說就是如果用戶將鼠標(biāo)放置在圖片上，圖片的一個(gè)區(qū)域就會(huì)被放大。然后展示在右邊，這個(gè)功能可以讓用戶更好的看商品的細(xì)節(jié)，也比較好玩。

今天我們將來展示這個(gè)效果，axure制作這個(gè)功能并不是很困難，至少比作者之前的小游戲容易太多了，其中唯一用到的高級(jí)功能就是函數(shù)，且都是直接使用，沒有復(fù)雜的全局變量以及觸發(fā)面板。

一、成果展示

點(diǎn)擊我體驗(yàn)：點(diǎn)擊此處。

交互說明：

• 當(dāng)鼠標(biāo)移入畫面中的時(shí)候顯示放大區(qū)域以及放大后的結(jié)果；
• 放大區(qū)域隨著用戶的鼠標(biāo)移動(dòng)；
• 鼠標(biāo)離開畫面之后放大區(qū)域以及放大之后的結(jié)果同時(shí)消失；
• 放大后的結(jié)果隨著鼠標(biāo)變化，但是顯示的區(qū)域是不變的。

二、制作方法

1. 素材準(zhǔn)備

首先需要搜集所用到的圖片，本例子中的圖片可以隨意找，只要能夠清晰的反應(yīng)放大前后的區(qū)別就可以，放大區(qū)域標(biāo)注的圖片直接從淘寶中進(jìn)行截屏。

2. 放大顯示區(qū)域的設(shè)置

放大顯示區(qū)域和放大區(qū)域的大小是一致的，均設(shè)置為250*250，然后將該區(qū)域設(shè)置為動(dòng)態(tài)面板。進(jìn)入動(dòng)態(tài)面板將其中的圖片設(shè)置為500*500。

這樣基本就實(shí)現(xiàn)了整體布局，不過我們要的顯然不是一個(gè)靜止的圖片，還需要讓它隨著放大區(qū)域的不同而發(fā)生移動(dòng)。

3. 放大區(qū)域的鼠標(biāo)跟隨

將放大區(qū)域命名為bfdq，然后設(shè)置其交互。

上述條件的意思為當(dāng)鼠標(biāo)進(jìn)入被放大區(qū)域的時(shí)候，bfdp圖片坐標(biāo)定位為（鼠標(biāo)x坐標(biāo)-62，鼠標(biāo)y坐標(biāo)-62）。這種設(shè)置也有一定的問題，即當(dāng)該圖片跟隨鼠標(biāo)的時(shí)候，鼠標(biāo)將會(huì)失去接觸被放大區(qū)域的機(jī)會(huì)，這樣移動(dòng)就會(huì)失效。為了保證移動(dòng)的效果，再追加一條設(shè)置。

這樣，該區(qū)域就會(huì)隨著鼠標(biāo)進(jìn)行移動(dòng)了，當(dāng)然，這樣也不行，因?yàn)楦鶕?jù)淘寶的情況，這個(gè)區(qū)域不能夠移出一定的范圍，顯然只允許在圖片中進(jìn)行移動(dòng)。所以設(shè)置一下其邊界條件。

這樣，該放大區(qū)域隨著鼠標(biāo)進(jìn)行移動(dòng)的設(shè)定就完成了，這個(gè)時(shí)候，只要移動(dòng)鼠標(biāo)，該區(qū)域就會(huì)隨著鼠標(biāo)進(jìn)行移動(dòng)了，且不會(huì)離開圖片所在的區(qū)域。

4. 放大結(jié)果的顯示

上面的設(shè)置雖然已經(jīng)完成了放大區(qū)域的鼠標(biāo)跟隨，但是放大結(jié)果還是不會(huì)發(fā)生變化的。為了實(shí)現(xiàn)放大結(jié)果的變化，我們需要理解放大結(jié)果究竟是什么。

放大結(jié)果是在固定的區(qū)域顯示的，所以動(dòng)態(tài)面板的使用必不可少。其次，放大結(jié)果是隨著放大區(qū)域的改變而改變的。所以放大結(jié)果的圖片坐標(biāo)，是放大區(qū)域所在位置的函數(shù)，這樣我們就可以進(jìn)行設(shè)置了。

設(shè)置的方法十分簡(jiǎn)單，如上所示，即讓放大結(jié)果成為放大區(qū)域坐標(biāo)的函數(shù)就可以了，其中LVAR1這個(gè)局部變量指代的就是放大區(qū)域。

5. 元素的隱藏

事實(shí)上，現(xiàn)在已經(jīng)可以實(shí)現(xiàn)效果了，但是放大區(qū)域以及放大結(jié)果是一直存在的，這樣顯然和淘寶的情況是不符合的，所以我們將其全部隱藏起來。

那么什么時(shí)間顯示呢？

當(dāng)然是鼠標(biāo)移動(dòng)進(jìn)入圖片的時(shí)候了，當(dāng)然，如果鼠標(biāo)再次離開圖片我們應(yīng)該讓這些區(qū)域再一次變化為隱藏。

這樣就可以實(shí)現(xiàn)以上的所有效果了。

總結(jié)

通過上面的方法，我們成功制作了一個(gè)放大鏡的效果，這個(gè)案例的主要操作要點(diǎn)在于放大區(qū)域和放大結(jié)果的鼠標(biāo)跟隨，所以重難點(diǎn)就是鼠標(biāo)坐標(biāo)有關(guān)函數(shù)的使用。

希望大家能夠有所收獲，該實(shí)例還是比較有用的， 在很多網(wǎng)頁中都可以用作商品展示。

#專欄作家#

馬璐，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注產(chǎn)品設(shè)計(jì)以及用戶體驗(yàn)，力求在技術(shù)一定的情況下將產(chǎn)品做到極致，充分發(fā)揮技術(shù)的潛能。

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

題圖作者提供