手机html文件效果预览,实现H5手机页面的预览效果

一、css

div.preview-layer{

display: none;

position: relative;

left:50%;

margin-left:-205px;

}

div.preview-layer .preview-bg{

position: fixed;

width: 100%;

height: 100%;

top: 0;

left: 0;

z-index:999;

background-color:#000;

opacity:0.7;

}

.preview-close{

position: fixed;

width: 20px;

height: 10px;

color:#fff;

cursor:pointer;

z-index:1000;

top:50%;

left:50%;

margin-left:220px;

}

div.preview-layer .preview-phone{

position: fixed;

width: 410px;

height: 840px;

background: url(../images/iphone-bg.png) no-repeat no-repeat;

z-index: 1000;

}

.preview-html{

position: absolute;

width:361px !important;

height: 638px !important;

top:98px;

left:24px;

border:2px solid #000;

border-radius: 5px;

outline: none;

background-color: #fff;

}

二、html

关闭预览

三、JS

//预览

function preview(ID){

var murl = 'wxwebindex/previewcourseware.do?ID='+ID;

if(ID=='' || ID==null){

alert("请先保存信息!");

}

else{

$("#preview-html").attr('src', murl);

$("#zhongxin").hide();

$(".preview-layer").css('display','block');

}

}

//关闭预览

function previewclose(){

$(".preview-layer").css('display','none');

$("#zhongxin").show();

}

效果：