1. 「BOSS」SEO顾问优化更专业首页
  2. SEO知识
  3. seo技术

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

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

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

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

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

使用popup以后效果如下:

MIP站如何通过添加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);

}

基于以上,我们基本可以实现图片的popup效果了。

原创文章,作者:大BOSS,如若转载,请注明出处:https://www.bossseo.cn/1253.html