如下圖(tu)所示，用戶往(wang)往(wang)希望能夠在(zai)點擊圖(tu)片(pian)后獲取大(da)圖(tu)，并對圖(tu)片(pian)進行局部(bu)放大(da)和(he)移(yi)動，以便(bian)查看(kan)圖(tu)中的詳細數據。

而對(dui)于圖(tu)集來說，還需(xu)要有自由切換(huan)功能(neng)，才能(neng)夠滿足用戶需(xu)求。

因此，詳情頁中(zhong)主體內容包括圖(tu)片的情況下，圖(tu)片應(ying)能點擊調(diao)起大(da)圖(tu)、縮(suo)小放大(da)功能使用自如，手勢支持順(shun)滑，圖(tu)集能自由切換。

二、參考案例

參考案例1

如下圖所示，詳情頁主體內容中的圖片，點擊后可以調起大圖，縮小放大功能使用自如，手勢支持順滑，可以作為參考。 
 

參考案例2

如下圖所示，詳情頁主體內容中的圖集(ji)，點擊后可(ke)以調起(qi)大(da)圖，縮小放大(da)功能(neng)使用自如，手勢支持順(shun)滑(hua)，且能(neng)夠(gou)自由切換，可(ke)以作為參考。

三、以點擊調起大圖為例談技術實現

普(pu)通的(de)Web頁(ye)面(mian)是無法直接查看圖片(pian)的(de)，而放大(da)查看圖片(pian)不僅(jin)僅(jin)是簡單(dan)的(de)放大(da)圖片(pian)，如(ru)果想要(yao)實現與(yu)原生手機應用中類似的(de)放大(da)查看圖片(pian)的(de)能力，需要(yao)通過JS代碼進行(xing)一些(xie)動效(xiao)(xiao)和交(jiao)互效(xiao)(xiao)果封裝。

1. MIP站添加popup屬性即可直接使用

在MIP中，已經將圖片查看效果封裝到了<mip-img>組件內部，通過添加popup屬性來直接使用，例如：<mip-img popup>。

使用(yong)popup以后效(xiao)果如下：

對(dui)于(yu)MIP站來(lai)說(shuo)，直接添加(jia)popup屬性就可(ke)以實現點(dian)(dian)擊調起(qi)大圖的效果。而對(dui)于(yu)普通站點(dian)(dian)來(lai)說(shuo)，也可(ke)以參(can)考MIP的popup技術原(yuan)理，升級(ji)自(zi)己的站點(dian)(dian)。

2. popup技術原理詳解

popup效果不算特別復雜，接下來通過如(ru)下示例為大家講解popup在MIP中是如(ru)何實現(xian)的。

（1）功能拆解

實現圖片的popup效果，主要考慮以下幾個功能： 
 

- 圖片popup（圖片彈起）：當前圖片遵循約定動畫曲線放大至最大，同時將背景變黑； 
 

- 圖片拖拽：圖片進入放大查看狀態以后，可以被拖拽，向下拖拽時可以退出放大瀏覽效果； 
 

- 圖片(pian)popdown（圖片(pian)落坑）：當(dang)圖片(pian)從(cong)放(fang)大瀏覽狀態退出時，應當(dang)遵循(xun)通過平滑動畫回到原來圖片(pian)位置的(de)交(jiao)互效果，簡稱落坑。

（2） 代碼實現

通過(guo)以上(shang)功(gong)能(neng)拆解(jie)，我們可(ke)以一起看一下幾個圖(tu)片popup的核(he)心功(gong)能(neng)的代碼實現：

（3）popup實現

① popup需(xu)要創建專(zhuan)用的(de)彈層dom，代碼(ma)示例如下：

1. // 創建彈層 dom
2. function createPopup(element, img) {
3. var mipPopWrap = document.querySelector('.mip-img-popUp-wrapper');
4. if (!!mipPopWrap && mipPopWrap.getAttribute('data-name') === 'mip-img-popUp-name'
5. && mipPopWrap.parentNode.tagName.toLowerCase() === 'body') {
6. mipPopWrap.querySelector('img').setAttribute('src', img.src);
7. return mipPopWrap;
8. }
9.  
10. var popup = document.createElement('div');
11. // 阻止縱向滑動
12. new Gesture(popup, {
13. preventY: true
14. });
15. popup.className = 'mip-img-popUp-wrapper';
16. popup.setAttribute('data-name', 'mip-img-popUp-name');
17.  
18. // 創建圖片預覽圖層
19. var popUpBg = document.createElement('div');
20. var innerImg = new Image();
21.  
22. popUpBg.className = 'mip-img-popUp-bg';
23. innerImg.className = 'mip-img-popUp-innerimg';
24. innerImg.src = img.src;
25.  
26. popup.appendChild(popUpBg);
27. popup.appendChild(innerImg);
28. document.body.appendChild(popup);
29.  
30. return popup;
31. }

② 實現用戶(hu)點擊時(shi)的圖片(pian)放大(da)和背景(jing)變化(hua)效果，代(dai)碼示例如下：

1. function bindPopup(element, img) {
2. var popup;
3. var popupBg;
4. var popupImg;
5. // 圖片點擊時展現圖片
6. img.addEventListener('click', function (event) {
7. event.stopPropagation();
8. // 圖片未加載則不彈層
9. if (img.width + img.naturalWidth === 0) {
10. return;
11. }
12.  
13. popup = createPopup(element, img);
14. popupBg = popup.querySelector('.mip-img-popUp-bg');
15. popupImg = popup.querySelector('img');
16.  
17. //觸發圖片落坑
18. popup.addEventListener('click', imagePop, false);
19.  
20. var imgOffset = getImgOffset(img);
21.  
22. var onResize = function () {
23. imgOffset = getImgOffset(img);
24. css(popupImg, imgOffset);
25. naboo.animate(popupImg, getPopupImgPos(imgOffset.width, imgOffset.height)).start();
26. };
27. window.addEventListener('resize', onResize);
28.  
29. css(popupImg, imgOffset);
30. css(popupBg, 'opacity', 1);
31. css(popup, 'display', 'block');
32.  
33. naboo.animate(popupImg, getPopupImgPos(imgOffset.width, imgOffset.height)).start();
34. css(img, 'visibility', 'hidden');
35. css(img.parentNode, 'zIndex', 'inherit');
36. }, false);
37. }

③ 實(shi)現(xian)圖(tu)片落坑(keng)，具體(ti)代碼(ma)示例如下(xia)：

1. function imagePop() {
2. naboo.animate(popupBg, {
3. opacity: 0
4. }).start();
5. naboo.animate(popupImg, getImgOffset(img)).start(function () {
6. css(img, 'visibility', 'visible');
7. css(popup, 'display', 'none');
8. });
9. popup.removeEventListener('click', imagePop, false);
10. }

基于(yu)以上，我們基本可以實現圖片的popup效果(guo)了。

四、結語

提高(gao)(gao)用(yong)戶體驗(yan)，就要從用(yong)戶的角度出發，滿足用(yong)戶的合理需(xu)求。期待我們從多角度，全方位共同提高(gao)(gao)用(yong)戶體驗(yan)。