Show image preview next to the titles by hovering the mouse.
目前為
// ==UserScript==
// @name erai-raws preview Image
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Show image preview next to the titles by hovering the mouse.
// @author dr.bobo0
// @match https://www.oxtorrent.co/
// @icon data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAAAAAAeW/F+AAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAD/h4/MvwAAAAd0SU1FB+cFERYzNsSqEXsAAADBSURBVCjPY7RiwAeYGGgozQKhPHjiUcUXvjjCwMDAwGjFwMCgUi6BqfFC5xcGBmZZBgaefiEs5krwnIbY7cGD1V4PCYi0NQ532UCcpgLhHVl7ByocD3cKC1zti04Y68iXZkx/H0FyNJZg+Ypk6wvqBCqdpLkRgjwSmNI2CGkDLLolyqGBy+CBiHsWBgaGOxBxGyT9yLovMGAHRyDSO79gld3xApJavtzVwpIgLkz9BU1rDAwh4h6okshJkfaBihUAAMGoJCE4fyJaAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIzLTA1LTE3VDIyOjUxOjUzKzAwOjAwF57XXQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMy0wNS0xN1QyMjo1MTo1MyswMDowMGbDb+EAAAAodEVYdGRhdGU6dGltZXN0YW1wADIwMjMtMDUtMTdUMjI6NTE6NTQrMDA6MDD0cXCwAAAAAElFTkSuQmCC
// @grant none
// ==/UserScript==
document.querySelectorAll("td > a[href^='/torrent/']").forEach(link => {
link.addEventListener("mouseover", function(event) {
let previewContainer = document.createElement("div");
previewContainer.style.position = "fixed";
previewContainer.style.display = "none";
previewContainer.style.transition = "opacity 0.1s ease-in-out";
previewContainer.style.opacity = 0;
previewContainer.style.width = "216px";
previewContainer.style.height = "307px";
previewContainer.style.overflow = "hidden";
document.body.appendChild(previewContainer);
var url = this.href;
var cachedImage = localStorage.getItem(url);
if (cachedImage) {
previewContainer.innerHTML = `<img style="width: 100%; height: 100%;" src="${cachedImage}"/>`;
document.addEventListener("mousemove", function (event) {
previewContainer.style.top = event.clientY + 20 + "px";
previewContainer.style.left = event.clientX + 20 + "px";
// Check if preview container is too close to edge of viewport
if (previewContainer.getBoundingClientRect().right > window.innerWidth) {
previewContainer.style.left = (window.innerWidth - previewContainer.offsetWidth - 20) + "px";
}
if (previewContainer.getBoundingClientRect().bottom > window.innerHeight) {
previewContainer.style.top = (window.innerHeight - previewContainer.offsetHeight - 20) + "px";
}
});
previewContainer.style.display = "block";
setTimeout(function () {
previewContainer.style.opacity = 1;
}, 0);
} else {
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "document";
xhr.onload = function() {
let preview = xhr.response.querySelector("#torrentsimage img");
previewContainer.innerHTML = `<img style="width: 100%; height: 100%;" src="${preview.getAttribute("src")}"/>`;
localStorage.setItem(url, preview.getAttribute("src"));
};
document.addEventListener("mousemove", function (event) {
previewContainer.style.top = event.clientY + 20 + "px";
previewContainer.style.left = event.clientX + 20 + "px";
// Check if preview container is too close to edge of viewport
if (previewContainer.getBoundingClientRect().right > window.innerWidth) {
previewContainer.style.left = (window.innerWidth - previewContainer.offsetWidth - 20) + "px";
}
if (previewContainer.getBoundingClientRect().bottom > window.innerHeight) {
previewContainer.style.top = (window.innerHeight - previewContainer.offsetHeight - 20) + "px";
}
});
xhr.send();
previewContainer.style.display = "block";
setTimeout(function () {
previewContainer.style.opacity = 1;
}, 0);
}
link.addEventListener("mouseout", function() {
previewContainer.style.opacity = 0;
document.removeEventListener("mousemove", function (event) {});
setTimeout(function () {
previewContainer.style.display = "none";
previewContainer.remove();
}, 300);
});
});
});