HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了模仿微信朋友圈 图片浏览 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>
    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下载地址

大佬总结

以上是大佬教程为你收集整理的模仿微信朋友圈 图片浏览 h5 html5 js全部内容,希望文章能够帮你解决模仿微信朋友圈 图片浏览 h5 html5 js所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。