模仿微信朋友圈 图片浏览 h5 html5 js
<!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> html,body,.cover{margin:0;height:100%;width: 100%;} img{height:100px;width:100px;position:relative;display:block;margin:0 auto;} .cover{background-color:rgba(0, 0, 0, 1);position:fixed;top: 0;left:0;display:none;} .bg-animation{animation: bg 0.4s;-webkit-animation: bg 0.4s;display:block !important;} @keyframes bg { from {background: rgba(0, 0, 0, 0);} to {background: rgba(0, 0, 0, 1);} } @-webkit-keyframes bg /* Safari 和 Chrome */ { from {background: rgba(0, 0, 0, 0);} to {background: rgba(0, 0, 0, 1);} } </style> <body> <img src="img/pb1.jpg" alt="" class='img'> <img src="img/pb2.jpg" alt="" class='img'> <img src="img/pb3.jpg" alt="" class='img'> <img src="img/db4.jpg" alt="" class='img'> <div class="cover"></div> </body> <script src="preview.js"></script> <script> preView.init('.img','.cover'); </script> </html>
(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,c_selector){ this.el=$$(selector); var pre=this; function large(){ var trans="0.4s cubic-bezier(0.42, 0, 0.61, 0.75)"; 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>650?650/this.width: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)"; $$(c_selector)[0].className+=" bg-animation"; 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; $$(c_selector)[0].className=$$(c_selector)[0].className.replace(' bg-animation',''); setTimeout(function(){ this.style.zIndex='auto'; }.bind(this),400); } } for(var i=0;i<this.el.length;i++){ this.el[i].addEventListener('click',large); } } function $$(sel){ return doc.querySelectorAll(sel); } return preView = new preview(); })(document,window)