【自用】JPG

1、去除火狐自带缩放(默认100%大小自动居中),2、可拖拽,3、以鼠标中心缩放,4、限定最小缩放(图片大小和屏幕大小较小值的50%)

目前為 2021-07-09 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name        【自用】JPG
// @namespace   Violentmonkey Scripts
// @match       http*://*/*.jpg
// @grant       none
// @version     2021.07.09
// @author      heckles
// @description 1、去除火狐自带缩放(默认100%大小自动居中),2、可拖拽,3、以鼠标中心缩放,4、限定最小缩放(图片大小和屏幕大小较小值的50%)
// ==/UserScript==

//*绑定事件*/
function addEvent(obj, sType, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(sType, fn, false);
    } else {
        obj.attachEvent('on' + sType, fn);
    }
};
function removeEvent(obj, sType, fn) {
    if (obj.removeEventListener) {
        obj.removeEventListener(sType, fn, false);
    } else {
        obj.detachEvent('on' + sType, fn);
    }
};
function prEvent(ev) {
    var oEvent = ev || window.event;
    if (oEvent.preventDefault) {
        oEvent.preventDefault();
    }
    return oEvent;
}
//*添加滑轮事件*/
function addWheelEvent(obj, callback) {
    if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
        addEvent(obj, 'DOMMouseScroll', wheel);
    } else {
        addEvent(obj, 'mousewheel', wheel);
    }
    function wheel(ev) {
        var oEvent = prEvent(ev),
        delta = oEvent.detail ? oEvent.detail > 0 : oEvent.wheelDelta < 0;
        callback && callback.call(oEvent, delta);
        return false;
    }
};

//*页面载入后*/
window.onload = function () {
    var oImg = document.getElementById('pic_xx_img'); //【【】【】【】【此处自己改】【】【】【】【】】
    /*拖拽功能*/
    (function () {
        addEvent(oImg, 'mousedown', function (ev) {
            var oEvent = prEvent(ev),
            oParent = oImg.parentNode,
            disX = oEvent.clientX - oImg.offsetLeft,
            disY = oEvent.clientY - oImg.offsetTop,
            startMove = function (ev) {
                if (oParent.setCapture) {
                    oParent.setCapture();
                }
                var oEvent = ev || window.event,
                l = oEvent.clientX - disX,
                t = oEvent.clientY - disY;
                oImg.style.left = l + 'px';
                oImg.style.top = t + 'px';
                oParent.onselectstart = function () {
                    return false;
                }
            },
            endMove = function (ev) {
                if (oParent.releaseCapture) {
                    oParent.releaseCapture();
                }
                oParent.onselectstart = null;
                removeEvent(oParent, 'mousemove', startMove);
                removeEvent(oParent, 'mouseup', endMove);
            };
            addEvent(oParent, 'mousemove', startMove);
            addEvent(oParent, 'mouseup', endMove);
            return false;
        });
    })();
    //*以鼠标位置为中心的滑轮放大功能*/
    (function () {
        addWheelEvent(oImg, function (delta) {
            var ratioL = (this.clientX - oImg.offsetLeft) / oImg.offsetWidth,
            ratioT = (this.clientY - oImg.offsetTop) / oImg.offsetHeight,
            ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,
            w = Math.max(parseInt(oImg.offsetWidth * ratioDelta), Math.min(0.5 * screen.width, 0.5 * img.width)), //!!!这里是自己修改的,限定最小缩放
            h = Math.max(parseInt(oImg.offsetHeight * ratioDelta), Math.min(0.5 * screen.height, 0.5 * img.height)), //!!!这里是自己修改的,限定最小缩放
            l = Math.round(this.clientX - (w * ratioL)),
            t = Math.round(this.clientY - (h * ratioT));
            with (oImg.style) {
                width = w + 'px';
                height = h + 'px';
                left = l + 'px';
                top = t + 'px';
            }
        });
    })();
};

//==================上面是从网上摘的=====================


var css_s = document.querySelectorAll("head > link:nth-child(3)"); //获取浏览器自带的图片css
css_s[0].href = ""; //删了,要不有冲突


var img_url = document.getElementsByTagName("img")[0].src + "?" + Date.parse(new Date()); //重构地址
var img = new Image(); // 创建对象
img.src = img_url;

//var pichref = window.location.href;//获取当前网址,也就是图片地址
var imgs = document.getElementsByTagName("img");
var img0 = imgs[0]; //获取默认图片
img0.style.cssText = "display:none;height:0px" //隐藏默认图片
var pic_xx = document.createElement("img"); //创建img
document.body.appendChild(pic_xx); //div加到页面最后
pic_xx.setAttribute("Id", "pic_xx_img"); //定ID

pic_xx.src = img_url;
img.onload = function(){// 加载完成执行
var le = 0.5*(window.innerWidth - img.width);
var to = 0.5*(window.innerHeight - img.height);
//alert('width:'+img.width+',height:'+img.height);
pic_xx.style.cssText = "position:absolute;top:"+to+"px;left:"+le+"px;";
};