目前在用的追番网站和工具 (测试 iframe)
测试一下 wordpress 中使用 iframe 嵌入的功能,顺便谈谈自从b站大会员变得不好用之后, 目前正在用的追番网站和工具。
追番网站和工具
bangumi :用来搜索番剧名, 看评分和(婆罗门的)评价。
蜜柑计划 :新番下载,界面清爽干净,易于查找,没有小广告,首选;没有的话再去 Nyaa 搜索。
弹弹play :视频播放软件,能够自动加载弹幕,有移动端app。
ACG盒子 :有许多其他的网站链接备选。
关于 iframe
测试之后发现可以用,只是觉得太小了,想要能够全屏。于是在右下加了个图标 toggle full screen,弄好之后又觉得一个图标伫在那里太丑了,于是又把图标隐藏了。最后发现模板/主题的code block 就能够全屏,它居然还有个动画。 本来用 wordpress 就是图省事,不想碰 html JavaScript CSS php 这些东西,结果最后还是全都涉及到了, 我的手已经不干净了(get hands dirty)……
不管怎样,把代码先放在这里方便以后用 iframe 的时候抄。
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style>
.iframe-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 66.67%;
}
.iframe-container.maximized {
position: fixed;
top:0;
left:0;
padding-bottom: 0;
width:100vw;
height:100vh;
border:0 none;
z-index:9999999;
}
.iframe-container iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
div.togglebutton {
position:absolute;
right:0;
bottom:0;
width:50px;
height:50px;
content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgOWgtMnYtNWgtN3YtMmg5djd6bS05IDEzdi0yaDd2LTVoMnY3aC05em0tMTUtN2gydjVoN3YyaC05di03em05LTEzdjJoLTd2NWgtMnYtN2g5eiIvPjwvc3ZnPg==);
padding:10px;
opacity:0;
}
div.togglebutton:hover{
opacity:1;
}
div.togglebutton:active{
opacity:1;
}
</style>
<script>
$(".iframe-container").each(function () {
$(this).append('<div class="togglebutton"></div>');
});
$("div.togglebutton").click(function () {
$(this).closest(".iframe-container").toggleClass("maximized");
});
</script>