效果如下：
完整代码如下
<!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>
网友回复
我知道答案，我要回答
私活外包
最新提问
如何用html写出网页滚动视频播放卡片视觉差异效果的代码？
程序员如何低成本搭建代理进行科学上网学习技术？
threejs如何做个三维搭积木的游戏？
three如何实现标记多个起始路过地点位置后选择旅行工具（飞机汽车高铁等），最后三维模拟行驶动画导出mp4？
ai实时驱动的3d数字人可视频聊天的开源技术有吗
swoole+phpfpm如何实现不同域名指向不同目录的多租户模式？
如何用go替换nginx实现请求phpfpm解析运行php脚本？
有没有浏览器离线运行进行各种文档、图片、视频格式转换的开源工具？
如何使用go语言搭建一个web防火墙？
linux如何检测特定网络协议比如http协议中报文是否包含特点关键词并阻止返回给客户？
