html仿微信朋友圈图片浏览,模仿微信朋友圈 图片浏览 h5 html5 js

啥也不说了直接上代码

Document

body{margin:0;}

img{height:100px;width:100px;position:relative;display:block;margin:0 auto;}

preView.init('.img');

preview.js

(function(doc,win){

var preview = function(){

this.win_w=doc.body.offsetWidth; //屏幕宽度

this.win_h=doc.documentElement.clientHeight; //屏幕高度

this.index=1;

}

preview.prototype.init = function(selector){

this.el=doc.querySelectorAll(selector);

var pre=this;

function large(){

var trans="0.7s cubic-bezier(0.42, 0, 0.46, 1)";

this.style.webkitTransition=trans;

if(this.className.indexOf('iamlarge')==-1){

this.className+=' iamlarge';

var scroll_top=doc.body.scrollTop; //滚动条上卷高度

this.style.transition=trans;

(function(){

var scale=pre.win_w/this.width;

var imgeh=this.height*scale;

var move_y=((pre.win_h-this.height)/2-this.offsetTop+scroll_top)/scale;

var move_x=((pre.win_w-this.width)/2-this.offsetLeft)/scale;

var tran="scale("+scale+","+scale+") translate3d("+move_x+"px,"+move_y+"px,0)";

document.body.style.backgroundColor="#000";

this.style.zIndex=pre.index;

this.style.transform=tran;

this.style.webkitTransform=tran;

pre.index++;

}.call(this))

}else{

this.className=this.className.replace(' iamlarge','');

var tran="scale(1,1) translate3d(0,0,0)";

this.style.transform=tran;

this.style.webkitTransform=tran;

document.body.style.backgroundColor="transparent";

setTimeout(function(){

this.style.zIndex='auto';

}.bind(this),700);

}

}

for(var i=0;i

this.el[i].addEventListener('click',large);

}

}

return preView = new preview();

})(document,window)

demo下载地址