MIP站如何通过添加popup属性，实现点击调起大图。

2018年8月，百度更新的最新的《百度移动搜索落地页体验白皮书4.0》，其中图片交互算法，到底需要怎么来实现呢？怎么才能符合百度搜索规范，获得百度的青睐，从而获得更多的排名呢？请仔细阅读以下文章。

普通的Web页面是无法直接查看图片的，而放大查看图片不仅仅是简单的放大图片，如果想要实现与原生手机应用中类似的放大查看图片的能力，需要通过JS代码进行一些动效和交互效果封装。

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

在MIP中，已经将图片查看效果封装到了<mip-img>组件内部，通过添加popup属性来直接使用，例如：<mip-img popup>。

使用popup以后效果如下：

对于MIP站来说，直接添加popup属性就可以实现点击调起大图的效果。而对于普通站点来说，也可以参考MIP的popup技术原理，升级自己的站点。

2. popup技术原理详解

popup效果不算特别复杂，接下来通过如下示例为大家讲解popup在MIP中是如何实现的。

（1）功能拆解

实现图片的popup效果，主要考虑以下几个功能：

– 图片popup（图片弹起）：当前图片遵循约定动画曲线放大至最大，同时将背景变黑；

– 图片拖拽：图片进入放大查看状态以后，可以被拖拽，向下拖拽时可以退出放大浏览效果；

– 图片popdown（图片落坑）：当图片从放大浏览状态退出时，应当遵循通过平滑动画回到原来图片位置的交互效果，简称落坑。

（2）代码实现

通过以上功能拆解，我们可以一起看一下几个图片popup的核心功能的代码实现：

（3）popup实现

① popup需要创建专用的弹层dom，代码示例如下：

// 创建弹层 dom

function createPopup(element, img) {

var mipPopWrap = document.querySelector('.mip-img-popUp-wrapper');

if (!!mipPopWrap && mipPopWrap.getAttribute('data-name') === 'mip-img-popUp-name'

&& mipPopWrap.parentNode.tagName.toLowerCase() === 'body') {

mipPopWrap.querySelector('img').setAttribute('src', img.src);

return mipPopWrap;

}

var popup = document.createElement('div');

// 阻止纵向滑动

new Gesture(popup, {

preventY: true

});

popup.className = 'mip-img-popUp-wrapper';

popup.setAttribute('data-name', 'mip-img-popUp-name');

// 创建图片预览图层

var popUpBg = document.createElement('div');

var innerImg = new Image();

popUpBg.className = 'mip-img-popUp-bg';

innerImg.className = 'mip-img-popUp-innerimg';

innerImg.src = img.src;

popup.appendChild(popUpBg);

popup.appendChild(innerImg);

document.body.appendChild(popup);

return popup;

}

② 实现用户点击时的图片放大和背景变化效果，代码示例如下：

function bindPopup(element, img) {

var popup;

var popupBg;

var popupImg;

// 图片点击时展现图片

img.addEventListener('click', function (event) {

event.stopPropagation();

// 图片未加载则不弹层

if (img.width + img.naturalWidth === 0) {

return;

}

popup = createPopup(element, img);

popupBg = popup.querySelector('.mip-img-popUp-bg');

popupImg = popup.querySelector('img');

//触发图片落坑

popup.addEventListener('click', imagePop, false);

var imgOffset = getImgOffset(img);

var onResize = function () {

imgOffset = getImgOffset(img);

css(popupImg, imgOffset);

naboo.animate(popupImg, getPopupImgPos(imgOffset.width, imgOffset.height)).start();

};

window.addEventListener('resize', onResize);

css(popupImg, imgOffset);

css(popupBg, 'opacity', 1);

css(popup, 'display', 'block');

naboo.animate(popupImg, getPopupImgPos(imgOffset.width, imgOffset.height)).start();

css(img, 'visibility', 'hidden');

css(img.parentNode, 'zIndex', 'inherit');

}, false);

}

③ 实现图片落坑，具体代码示例如下：

function imagePop() {

naboo.animate(popupBg, {

opacity: 0

}).start();

naboo.animate(popupImg, getImgOffset(img)).start(function () {

css(img, 'visibility', 'visible');

css(popup, 'display', 'none');

});

popup.removeEventListener('click', imagePop, false);

}