b站的镜像网站
扒了下代码,发现只是一个iframe配合css实现的 其中核心css代码如下
<style>
.mirror_ifrom
{
-webkit-transform:scaleX(-1)
}
</style>
其中 核心代码为 -webkit-transform 属性
该属性的作用就是缩放
其中scaleX(x) 是缩放X轴,scaleY(x)是缩放Y轴,sacle(x)是x/y同时缩放
我们需要的是对称的页面,所以将x轴缩放一倍即可达到效果
以下是iframe部分代码
<iframe src="http://www.bilibili.com" width="100%" style="border-bottom: 0px; padding-bottom: 0px;" height="100%" frameborder="0" class="mirror_ifrom" sandbox="allow-forms allow-scripts allow-same-origin allow-popups"></iframe>
由于bilibili有非父页面重定向的设置,所以会导致iframe引用后跳转到B站去
所以将自己的iframe调整为和B站同源的效果 增加 sandbox属性
sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
以上! 感兴趣的胖友可以试试
网友评论