手机端图片点击预览，双指放大，完整demo，引入hammer.js

代码凌乱，自己写的绝对能用！
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding:0px;
                margin:0px;
            }
            html{
                height:100%;
            }
            body{
                height:100%;
            }
            .main{
                width: 3.75rem;
                position: relative;
                height:100%; 
                margin: 0 auto; 
                background: #eee
            }
            .main h1{
                font-size:0.16rem;
            }
            .main img{
                max-width: 100%
            }
            .box {
                width: 3.75rem;
                height:100%;
                background: #333;
                position: absolute;
                top:0px;
                left:0px;
                margin: 0 auto;
                align-items: center; /*定义body的元素垂直居中*/
                justify-content: center; /*定义body的里的元素水平居中*/
                display: none;
                overflow: hidden
            }
            .box img{
                width:100%;
                position: absolute;               
            }
        </style>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript">
            (function (doc, win) {//这段代码是做手机端rem适应的
                var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (clientWidth>640){
                           clientWidth=640 
                        }
                        if (!clientWidth) return;
                        else{
                            docEl.style.fontSize = clientWidth / 3.75 + 'px';
                        }
                    };
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);
        </script>
    </head>

    <body>
        <div class="main">
            <h1>点击这个图片进行预览</h1>
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545628346247&di=f2fcd4f88291e0f60d6599602ee8ab20&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3304533311%2C1137740692%26fm%3D214%26gp%3D0.jpg"/>
            
            <div class="box">
                <img src="" />
            </div>
        </div>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var pimg=document.querySelector("img");
            var oImg = document.querySelector(".box img");
            var oBox = document.querySelector(".box");
            pimg.onclick=function(){
                oBox.style.display="flex"
                oImg.src=pimg.src
            }
            oBox.onclick=function(){
                oBox.style.display="none"
                oImg.src=''
            }
            var hammer = new Hammer(oImg);//hammer实例化
            hammer.get('pan').set({direction: Hammer.DIRECTION_ALL});//激活pan(移动)功能
            hammer.get('pinch').set({enable: true});//激活pinch(双指缩放)功能
            hammer.on("panstart", function(event) {
                var left = oImg.offsetLeft;
                var tp = oImg.offsetTop;
                hammer.on("panmove", function(event) {
                    oImg.style.left = left + event.deltaX + 'px';
                    oImg.style.top = tp + event.deltaY + 'px';
                });
            })

            hammer.on("pinchstart", function(e) {
                hammer.on("pinchout", function(e) {
                    oImg.style.transition = "-webkit-transform 300ms ease-out";
                    oImg.style.webkitTransform = "scale(2.5)";
                });
                hammer.on("pinchin", function(e) {
                    oImg.style.transition = "-webkit-transform 300ms ease-out";
                    oImg.style.webkitTransform = "scale(1)";
                });
            })
        </script>
    </body>

</html>
手机端图片点击预览，双指放大，完整demo，引入hammer.js

猜你喜欢
