1.实现方式和效果
前段时间需要做一个在PC端预览移动端的功能，由于我是前端不太好，就在网上查找资料，花了半天的时间终于有所收获，在这里把我的实现代码分享给大家。想要在PC端实现模拟手机环境的预览效果，一般有两种方法，一种通过iframe实现，一种通过div实现的，这里我选择了后者。实现的效果如下：
2.实现代码
代码语言：javascript复制<html>
<head>
<script language="JavaScript" src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/JavaScript">
/**
弹出iframe页面(iframe后面会添加灰色蒙版)
**/
function showIframe(url){
//添加背景遮罩
$("<div id='YuFrameMobilePreviewBg' style='cursor:pointer;width:100%;height:100%;background-color: Gray;display:block;z-index:9998;position:absolute;left:0px;top:0px;filter:Alpha(Opacity=30);/* IE */-moz-opacity:0.4;/* Moz FF */opacity: 0.4; '/>").prependTo('body');
//添加移动预览的iframe
$("<div id='showMobilePreview'>"
"<div class='mobile_preview_header'><i class='mobile_preview_header_icon'></i></div>"
"<div class='mobile_preview_frame'><iframe id='YuFrameMobilePreview' name='YuFrameMobilePreview' ></iframe></div>"
"<div class='mobile_preview_footer'><i class='mobile_preview_footer_icon'></i></div>"
"</div>").prependTo('body');
$("#YuFrameMobilePreview").attr("src", url);
//点击背景遮罩移除iframe和背景
$("#YuFrameMobilePreviewBg").click(function() {
$("#showMobilePreview").remove();
$("#YuFrameMobilePreviewBg").remove();
});
}
</script>
<style type="text/css">
#showMobilePreview {
z-index: 9999;
width: 387px;
height: 768px;
min-height: 396px;
max-height: calc(100vh - 64px);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 1;
text-align: center;
border-radius: 50px;
box-shadow:-10px 10px 30px #333333;
}
.mobile_preview_header {
display: block;
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 387px;
background: #eeeff2;
text-align: center;
line-height: 40px;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
}
.mobile_preview_header_icon {
display: inline-block;
width: 65px;
height: 10px;
background: #c8c9cc;
border-radius: 9px;
vertical-align: middle;
margin-top: 18px;
}
.mobile_preview_frame {
width: 375px;
min-height: 294px;
height: 667px;
max-height: calc(100vh - 166px);
top: 40px;
left: 0;
border: 6px solid #eeeff2;
position: relative;
background-color: #fff;
display: block;
}
#YuFrameMobilePreview {
border: none;
width: 375px;
height: 100%;
}
.mobile_preview_footer {
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 52px;
width: 387px;
background: #eeeff2;
text-align: center;
line-height: 45px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
}
.mobile_preview_footer_icon {
display: inline-block;
width: 43px;
height: 43px;
background: #c8c9cc;
border-radius: 50%;
vertical-align: middle;
}
#mobilePreview{
background: url("mobile-preview.png") no-repeat;
padding-left: 20px;
color: #bcbdc1;
}
#mobilePreview:hover{
background: url("mobile-preview-hover.png") no-repeat;
padding-left: 20px;
color: #009ddc;
}
</style>
</head>
<body>
<input type="button" style="content: "F17c";" onClick="showIframe('https://m.baidu.com')" value="手机预览"/>
<hr/>
<div >
<span id="mobilePreview" onclick="showIframe('https://m.baidu.com')">手机预览</span>
</div>
</body>
<html>
