啥也不说了直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Document</title>
<Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
</head>
<style>
body{margin:0;}
img{height:100px;width:100px;position:relative;display:block;margin:0 auto;}
</style>
<body>
<img src="pic.jpg" alt="" class='img'>
</body>
<script src="preview.js"></script>
<script>
preView.init('.img');
</script>
</html>
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.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)";
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.length;i++){
this.el[i].addEventListener('click',large);
}
}
return preView = new preview();
})(document,window)
demo下载地址
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
