Greasy Fork 镜像站

Greasy Fork is available in English.

📂 缓存分发状态：(共享加速已生效)

🕒 页面同步时间：2026/01/03 13:08:17

🔄 下次更新时间：2026/01/03 14:08:17

手动刷新缓存

FloatButton

FloatButton wc组件

Verzia zo dňa 13.05.2025. Pozri najnovšiu verziu.

Tento skript by nemal byť nainštalovaný priamo. Je to knižnica pre ďalšie skripty, ktorú by mali používať cez meta príkaz // @require https://update.greasyfork.org/scripts/535840/1588055/FloatButton.js

Spýtať sa otázku, uverejniť recenziu, alebo nahlásiť skript.

Zalomiť riadky

/**
 * @extends {HTMLElement}
 */
class FloatButton extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: "open" });
    const style = document.createElement("style");
    style.textContent = `
      :host {
        /* 避免外部css的影响 */
        all: initial;
        font-size: normal;
        position: fixed;
        left: 5px;
        top: 20%;
        transform: translateY(-50%);
        z-index: 1000;
      }
      .float-button {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background:rgba(251, 114, 153, 0.75);
        color: white;
        border: none;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
      }

      .float-button:hover {
        background: #fb7299;
        transform: scale(1.1);
      }
      .panel {
        position: absolute;
        display: flex;
        left: 50px;
        top: 0;
        gap: 9px;
        justify-content: center;
 
        flex-wrap: wrap;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        width: 200px;
        padding: 10px;
        opacity: 0;
        transform: translateX(-20px);
        transition: all 0.3s ease;
        pointer-events: none;
      }
      .panel.open {
        opacity: 1;
        transform: translateX(0);
        pointer-events: all;
      }
      .close {
        transform: rotate(180deg);
      }`;
    shadowRoot.innerHTML = `
    <button class="float-button">+</button>
      <div class="panel">
        <div class="input-group">
        <slot name="interval-faster">Widget Missing</slot>
        </div>
        <div class="input-group">
        <slot name="interval-slower">Widget Missing</slot>
        </div>
      </div>`;
    shadowRoot.append(style);
    const floatBtn = shadowRoot.querySelector(".float-button");
    const panel = shadowRoot.querySelector(".panel");

    floatBtn.addEventListener("click", () => {
      panel.classList.toggle("open");
      floatBtn.classList.toggle("close");
    });
  }
}
customElements.define("float-button", FloatButton);

扫码关注【爱吃馍】