效果如下：
完整代码如下
<!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>
网友回复
我知道答案，我要回答
私活外包
最新提问
有没有不依赖embedding向量的RAG技术？
有没有支持实时打断语音通话并后台帮你执行任何的ai模型？
开源ai大模型文件格式GGUF、MLX、Safetensors、 ONNX 有什么区别？
出海挣钱支付收款PayPal、Wise 、PingPong、Stripe如何选择？
如何实现类似google的图片隐形水印添加和识别技术？
linux上如何运行任意windows程序？
ai能写出比黑客还厉害的零日漏洞等攻击工具攻击任意软件系统工程？
js如何获取浏览器的音频上下文指纹、Canvas指纹、WebGL渲染特征？
为啥ai开始抛弃markdown文本，重新偏好html文本了？
网站有没有办法鉴别访问请求是由ai操控chrome-devtools-mcp发出的？
