请问哪款动作,可以实现在线网页图片和下载在电脑的本地图片一样,按住鼠标滚轮自由放大缩小?

动作推荐 · 1145 次浏览
神经蛙20号 创建于 2023-12-13 14:39

如下图:网页图片放大只能点击一下原图,图片会稍微放大,但是像一些思维导图导出的未压缩高清图片等还是看不清

请问有大佬知道有哪款动作,可以实现网页图片和下载在电脑本地的图片一样,按住鼠标滚轮自由放大缩小?

谢谢了~


回复内容
CL 2023-12-13 14:54
#1

动作没法实现,建议下载到本地之后查看。 

或者试试这个动作:原尺寸图片 - by CL - 动作信息 - Quicker 

神经蛙20号 回复 CL 2023-12-13 15:56 :

谢谢,推荐的动作非常接近本地缩放了,除了一开始滚动图片会跑出显示屏外

CL 回复 神经蛙20号 2023-12-13 16:47 :

如果你有比较好的本地图片查看器,可以参考这个动作把图片保存为本地文件,然后再使用图片查看程序打开这个文件。

epodak 2024-02-06 17:42
#2

// ==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就可以了.
回复主贴