1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | // ==UserScript== // @name plurk Imagehover // @namespace http://tampermonkey.net/ // @version 0.12 // @description YES! // @author NOKO // @match https://www.plurk.com/* // @grant none // ==/UserScript== (function() { 'use strict'; var style = document.createElement('style'); style.innerHTML = ` @keyframes nodeInserted{from{outline-color: #fff;}to{outline-color: #000;}} a.pictureservices > img{animation-name: nodeInserted;} `; document.head.append(style); var ImageHoverOver = function(e){ if(e.target.dataset.hovered){return;} e.target.dataset.hovered = true; var img = document.createElement('img'); img.dataset.big = true; img.src = e.target.parentNode.href; img.style.position = 'fixed'; document.body.append(img); }; var ImageHoverMove = function(e){ var padding = 25; var img = document.querySelector('img[src="'+e.target.parentNode.href+'"][data-big]'); var windowHeight = window.innerHeight; var windowWidth = window.innerWidth; var elementRect = e.target.getBoundingClientRect(); var rightHanded = (e.clientX > windowWidth/2); var maxHeight = Math.min(img.naturalHeight, windowHeight-padding); var maxWidth = Math.min(img.naturalWidth, -2*padding+(rightHanded ? (elementRect.left) : (windowWidth-elementRect.left-elementRect.width)) ); var ratio = Math.min(maxHeight / img.naturalHeight, maxWidth / img.naturalWidth); var height = img.naturalHeight * ratio; var width = img.naturalWidth * ratio; var top = Math.max(0,Math.min(windowHeight-height-padding,(e.clientY -height/2))); var left = rightHanded ? (e.clientX - width - padding) : (e.clientX + padding); img.style.height = height + 'px'; img.style.width = width + 'px'; img.style.top = top + 'px'; img.style.left = left + 'px'; img.style.display=''; }; var ImageHoverOut = function(e){ var img = document.querySelector('img[src="'+e.target.parentNode.href+'"][data-big]'); img.style.display='none'; }; var inject = function(e){ if (e.animationName == 'nodeInserted') { e.target.addEventListener("mouseover", ImageHoverOver); e.target.addEventListener("mousemove", ImageHoverMove); e.target.addEventListener("mouseout", ImageHoverOut); } }; document.addEventListener('animationstart', inject, false); })(); |
Direct link: https://paste.plurk.com/show/2709553