模擬移動端圖片預覽

jopen 9年前發布 | 4K 次閱讀 JavaScript

模擬移動端（主要針對手機）預覽圖片效果。在文本流中顯示圖片的縮略圖，點擊圖片彈出圖層顯示大圖。

<!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></pre>
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！