美文网首页
B站视频旋转插件

B站视频旋转插件

作者: 某时橙 | 来源:发表于2020-05-09 12:35 被阅读0次

    自码·视频旋转插件(需预装油猴)

    功能简单,但也实用,键入值,enter即可旋转,实现原理也非常简单就是利用rotate属性对父节点操作。

    源码:

    ```

    // ==UserScript==

    // @name        bilibili旋转按钮

    // @namespace  sunsoft

    // @description 这个测试脚本展示了基本的脚本的编写方法

    // @author      greatbody

    // @include    https://www.bilibili.com/video/*

    // @run-at      document-end

    // @version    0.1

    // @grant      unsafeWindow

    // @grant      GM_addStyle

    // @grant      GM_getValue

    // @grant      GM_setValue

    // @grant      GM_deleteValue

    // @grant      GM_listValues

    // @license    MIT/Expat License

    // ==/UserScript==

    {

      let newInput=document.createElement("input");

            newInput.setAttribute("type","text");

            newInput.setAttribute("id","RotateInputOjb")

            newInput.style="\

                position: absolute;\

                top:90%;\

                left:10px;\

                width:2vw;\

                border-radius: 2px;\

                border: 2px solid rgb(35, 106, 163)"

            document.getElementsByTagName("body")[0].appendChild(newInput)

            let input=document.getElementById("RotateInputOjb")

            input.addEventListener("keypress",function(e){

                if (e.keyCode == 13) {

                    let value=input.value;

                value=value+"deg";

                let dom=document.getElementsByClassName("bilibili-player-video")[0];

                dom.style=`transform:rotate(${value})`;

                e.preventDefault();

        }

            })

    }

    ```


    相关文章

      网友评论

          本文标题:B站视频旋转插件

          本文链接:https://www.haomeiwen.com/subject/zwxknhtx.html