☰

subscene preview Image

Show image preview next to the titles by hovering the mouse.

当前为 2023-02-25 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         subscene preview Image
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Show image preview next to the titles by hovering the mouse.
  6. // @author       dr.bobo0
  7. // @match        https://subscene.com/u/*/subtitles*
  8. // @grant        none
  9. // ==/UserScript==
  10. document.querySelectorAll('a').forEach(link => {
  11.   link.addEventListener("mouseover", function(event) {
  12.     let previewContainer = document.createElement("div");
  13.     previewContainer.style.position = "fixed";
  14.     //previewContainer.style.backgroundColor = "#f8f8f8";
  15.     //previewContainer.style.padding = "5px";
  16.     //previewContainer.style.border = "1px solid #ccc";
  17.     previewContainer.style.display = "none";
  18.     previewContainer.style.transition = "opacity 0.1s ease-in-out";
  19.     previewContainer.style.opacity = 0;
  20.     previewContainer.style.width = "154px";
  21.     previewContainer.style.height = "231px";
  22.     previewContainer.style.overflow = "hidden";
  23.     document.body.appendChild(previewContainer);
  24.  
  25.     var url = this.href;
  26.     var cachedImage = localStorage.getItem(url);
  27.  
  28.     if (cachedImage) {
  29. previewContainer.innerHTML = `<img style="width: 100%; height: 100%; border-radius: 8px;" src="${cachedImage}"/>`;
  30.       document.addEventListener("mousemove", function (event) {
  31.         previewContainer.style.top = event.clientY + 20 + "px";
  32.         previewContainer.style.left = event.clientX + 20 + "px";
  33.       });
  34.       previewContainer.style.display = "block";
  35.       setTimeout(function () {
  36.         previewContainer.style.opacity = 1;
  37.       }, 0);
  38.     } else {
  39.       var xhr = new XMLHttpRequest();
  40.       xhr.open("GET", url);
  41.       xhr.responseType = "document";
  42.  
  43.       xhr.onload = function() {
  44.         let preview = xhr.response.querySelector(".poster a img");
  45.         previewContainer.innerHTML = `<img style="width: 100%; height: 100%; border-radius: 8px;" src="${preview.getAttribute("src")}"/>`;
  46.         localStorage.setItem(url, preview.getAttribute("src"));
  47.       };
  48.  
  49.       document.addEventListener("mousemove", function (event) {
  50.         previewContainer.style.top = event.clientY + 20 + "px";
  51.         previewContainer.style.left = event.clientX + 20 + "px";
  52.       });
  53.  
  54.       xhr.send();
  55.       previewContainer.style.display = "block";
  56.       setTimeout(function () {
  57.         previewContainer.style.opacity = 1;
  58.       }, 0);
  59.     }
  60.  
  61.     link.addEventListener("mouseout", function() {
  62.       previewContainer.style.opacity = 0;
  63.       document.removeEventListener("mousemove", function (event) {});
  64.       setTimeout(function () {
  65.         previewContainer.style.display = "none";
  66.         previewContainer.remove();
  67.       }, 300);
  68.     });
  69.   });
  70. });