视频解析·书签版（缺少解析地址版）

最新推荐文章于 2024-09-28 19:02:04 发布

Cojozor

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量203

点赞数 1

文章标签：前端 javascript 视频

本文链接：https://blog.csdn.net/weixin_46245844/article/details/139066111

版权

地址变量为arr，类型为[["地址源名称","地址源"]]

具体代码如下：

const localHost = window.location.href;
const arr = [];
const head = document.querySelectorAll("head")[0];
head.innerHTML=``;
const body = document.querySelectorAll("body")[0];
const list = [];        
arr.forEach((i, n) => {
    const url = i[1] + localHost;
    const div = `<div class="tap" onclick="toNewCinema('${i[0]}')" data-url="${i[1] + localHost}">${i[0]}</div>`;
    list.push(div);
});
body.innerHTML ='';
body.innerHTML=`
<style>
    :root{
        margin: 0;
    }
    body{
        display: flex;
    }
    iframe {
        width: 100vw;
        height: 100vh;
        background-color: #3584f1;
        border: none;
        margin:0;
        position: absolute;
        top:0;
        left:0;
        z-index:1;
    }
    .btn{
        position: fixed;
        top: 400px;
        right: 5px;
        background-color: #2ea968;
        color: #fff;
        width: 40px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 30px;
        cursor: pointer;
        z-index:2;
    }

    .taps {
        position: fixed;
        width: 360px;
        background-color: #2ea968;
        right: 10px;
        font-size: 16px;
        line-height: 36px;
        flex-wrap: wrap;
        top: 400px;
        gap: 10px;
        padding: 20px;
        border-radius: 10px;
        color: #fff;
        display: none;
    }

    .btn:hover .taps{
        display: flex;
    }

    .tap{
        width: 80px;
        height: 36px;
        text-align: center;
        margin:auto;
        background-color: #d44461;
        cursor: pointer;
    }
    .tap:hover{
        background-color: #f1a935;
    }
    .active{
        background-color: #3584f1;
    }

</style>
<div class="btn">
    免
    <div class="taps">${list.join("")}</div>
</div>

<iframe allowtransparency=true frameborder='0' scrolling='no' allowfullscreen=true allowtransparency=true></iframe>
`;
function toNewCinema(context){
        [...document.getElementsByClassName("tap")].forEach(item=>{
            if(item.innerHTML===context){
                item.classList.add("active");
                const url = item.getAttribute("data-url");
                document.querySelectorAll("iframe")[0].setAttribute("src",url)
            }else{
                item.classList.remove("active");
            }
        });
}
toNewCinema(arr[0][0]);

复制该代码，在浏览器中新建书签