// ==UserScript==
// @name Mouse Hover Image Zoom and Center with Shift Key and Mousewheel
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Center and zoom in on images when hovering with the mouse and holding the Shift key while using the mouse wheel.
// @author epodak
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
let currentImage = null;
let shiftPressed = false;
let originalStyles = {};
function centerAndZoomImage(image, zoomAmt) {
if (shiftPressed && image === currentImage) {
if (!image.originalStyle) {
// Save original styles
image.originalStyle = {
width: image.style.width,
height: image.style.height,
position: image.style.position,
zIndex: image.style.zIndex,
left: image.style.left,
top: image.style.top,
transform: image.style.transform,
transition: image.style.transition
};
// Center image
image.style.position = 'fixed';
image.style.zIndex = '9999';
image.style.left = '50%';
image.style.top = '50%';
image.style.transform = 'translate(-50%, -50%)';
image.style.transition = 'transform 0.2s';
}
// Zoom image
if (typeof image.scalingFactor === 'undefined') {
image.scalingFactor = 1; // Initialize scaling factor
}
image.scalingFactor *= zoomAmt;
image.style.transform = `translate(-50%, -50%) scale(${image.scalingFactor})`;
}
}
document.addEventListener('mouseover', function(event) {
if (event.target.tagName === 'IMG') {
currentImage = event.target;
}
});
document.addEventListener('mouseout', function(event) {
if (event.target === currentImage) {
resetImage(currentImage);
currentImage = null;
}
});
function resetImage(image) {
if (image && image.originalStyle) {
// Restore original styles
Object.keys(image.originalStyle).forEach(key => {
image.style[key] = image.originalStyle[key];
});
image.scalingFactor = 1;
image.originalStyle = null;
}
}
document.addEventListener('wheel', function(event) {
if (shiftPressed && currentImage) {
event.preventDefault(); // Prevent page scrolling
const zoomAmt = event.deltaY > 0 ? 0.9 : 1.1; // Adjust zoom speed
centerAndZoomImage(currentImage, zoomAmt);
}
});
document.addEventListener('keydown', function(event) {
if (event.key === 'Shift') {
shiftPressed = true;
}
});
document.addEventListener('keyup', function(event) {
if (event.key === 'Shift') {
shiftPressed = false;
if (currentImage) {
resetImage(currentImage);
currentImage = null;
}
}
});
})();
===
这个油猴脚本可以.
我现做的,可能有点小bug,你测试一下.
按住shift就可以了.
京公网安备 11010502053266号