效果如下：
完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
bready(function() {
use(['jquery.qrcode.min'], function() {
$("#div-qcode").qrcode({
width: 200,
height: 200,
text: window.location.href
});
});
$("#desk-view").click(function() {
$("#priview-inf").removeClass().addClass("desk");
});
$("#pad-view").click(function() {
$("#priview-inf").removeClass().addClass("pad");
});
$("#phone-view").click(function() {
$("#priview-inf").removeClass().addClass("phone");
});
$("#qcode-view").hover(function() {
$("#div-qcode").show();
}, function() {
$("#div-qcode").hide();
});
});
</script>
<style>
body {
padding: 0;
margin: 0;
}
#priview-inf {
height: 100%;
overflow: visible;
position: relative;
}
.desk {
width: 100vw;
height: 100vh!important;
margin: 0 auto;
transition: all 0.5s ease 0s;
}
.pad {
height: 960px!important;
margin: 0 auto;
padding: 96px 100px 115px 49px;
width: 785px;
margin-top: 40px;
background: url(//repo.bfw.wiki/bfwrepo/image/5e1e76f746aed.png) no-repeat 0 0;
transition: all 0.5s ease 0s;
}
#div-qcode {
background: white;
padding: 10px;
width: 200px;
height: 200px;
position: absolute;
top: 30px;
left: 80px;
z-index: 11;
display: none;
}
.phone {
height: 735px!important;
margin: 0 auto;
padding: 102px 25px 159px 23px;
width: 414px;
margin-top: 40px;
background: url(//repo.bfw.wiki/bfwrepo/image/5e1e7690cf0da.png) no-repeat;
transition: all 0.5s ease 0s;
}
iframe {
padding: 0;
border: none;
margin: 0;
width: 100%;
height: 100%;
}
#device-area {
height: 30px;
padding: 0 10px;
}
#device-area a {
margin-right: 7px;
margin-top: 7px;
width: 17px;
height: 16px;
float: left;
cursor: pointer;
}
#qcode-view {
background: url("//repo.bfw.wiki/bfwrepo/icon/5da6cfc9b2953.png");
background-size: cover;
}
#desk-view {
background: url(//repo.bfw.wiki/bfwrepo/icon/5e1e776a4a749.png) no-repeat 0px 0
}
#pad-view {
background: url(//repo.bfw.wiki/bfwrepo/icon/5e1e776a4a749.png) no-repeat -24px 0
}
#phone-view {
background: url(//repo.bfw.wiki/bfwrepo/icon/5e1e776a4a749.png) no-repeat -71px 0
}
</style>
</head>
<body>
<div id="div-qcode"></div>
<div id="device-area">
<a id="desk-view"></a> <a id="pad-view"></a> <a id="phone-view"></a>
<a id="qcode-view"></a>
</div>
<div id="priview-inf" class="desk">
<iframe src="https://www.bfw.wiki"></iframe>
</div>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
