模拟移动端（主要针对手机）预览图片效果。在文本流中显示图片的缩略图，点击图片弹出图层显示大图。
<!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>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/8718.html