模拟移动端图片预览

2018-07-20 来源：open-open

模拟移动端（主要针对手机）预览图片效果。在文本流中显示图片的缩略图，点击图片弹出图层显示大图。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no">
    <title>移动端模拟手机预览效果</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrapper{
        position: relative;
        overflow: hidden;
        border:1px solid #ccc;
        margin:10px;
        padding:10px;
        box-shadow: 0 0 6px #333;
    }
    .wrapper p{
        line-height: 24px;
        font-size: 14px;
        padding-bottom:10px;
        color: #aaa;
    }
    .wrapper img{
        max-width: 240px;
    }
    .overlay{
        position: fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index:999;
        background: #ccc;
        width:100%;
        height:100%;
        display:none;
    }
    .overlay img{
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        z-index:9999;
    }
    </style>
</head>
<body>
    <div>
        <p>做人如果帅气温柔浪漫幽默风趣大方洒脱有气质有情怀有节操有风度有骨气有气节，那和我有什么区别？</p>
        <img src="images/5.jpg" alt="Hello World" id="img">
    </div>
    <div id="overlay">
        <img src="" alt="" id="layImg"/>
    </div>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    var imgItem = $("#img") ,
        overlay = $("#overlay") ,
        theImage = new Image();
    theImage.src = imgItem.attr("src");
    var img_width = theImage.width,
        img_height = theImage.height;
 
    var layImg = $("#layImg") ;
    imgPath = imgItem.attr("src");
    layImg.attr("src",imgPath);
 
    var m_width = window.screen.width,
        m_height =  window.screen.height ;
    function helloWorld(){
        if(img_width<m_width){
            if(img_height>m_height){
                layImg.css({"height":m_height});
            }else{
                layImg.css({"height":img_height,"width":img_width});
            }
        }else{
            if(img_height>m_height){
                var realRatio = img_width/m_width>img_height/m_height ;
                if(realRatio){
                    layImg.css({"width":m_width});
                }else{
                    layImg.css({"height":m_height});
                }
            }else{
                layImg.css({"width":m_width});
            }
        }
    }
    imgItem.click(function(){
        helloWorld() ;
        overlay.show();
    });
    overlay.click(function(){
        overlay.hide();
    });
    </script>
</body>
</html>

标签： isp

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。

上一篇:jFinal + Apache Commons FileUpload 实现上传

下一篇:JS拖拽元素兼容IE

最新资讯

热门推荐