1、去除火狐自带缩放（默认100%大小自动居中），2、可拖拽，3、以鼠标中心缩放，4、限定最小缩放（图片大小和屏幕大小较小值的50%）,5、左上角显示缩放比例，点击还原
目前為
// ==UserScript==
// @name 【自用】JPG
// @namespace Violentmonkey Scripts
// @match http*://*/*.jpg
// Homepage URL https://greasyfork.org/zh-CN/scripts/428791-%E8%87%AA%E7%94%A8-jpg
// 更新页面 https://greasyfork.org/zh-CN/scripts/428791/versions/new
// @grant none
// @version 2021.07.12
// @author heckles
// @description 1、去除火狐自带缩放（默认100%大小自动居中），2、可拖拽，3、以鼠标中心缩放，4、限定最小缩放（图片大小和屏幕大小较小值的50%）,5、左上角显示缩放比例，点击还原
// ==/UserScript==
document.body.style.cssText = "margin:0;background-color:#333;";
var img = new Image(); // 创建一个新的img，不过也不设定属性，相当于一个备份，后台应该是加载了，会有img.width产生，而且不操作它，因此是个定量
img.src = document.getElementsByTagName("img")[0].src;// + "?" + Date.parse(new Date()); //重构地址 //看来没必要，有的网站不知道是不是防外链，重构就无法加载例如DA和wallhaven
//*绑定事件*/
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;
}
};
//*页面载入后*/
img.onload = function () {//这里原来是window.onload,会有一各小bug，就是页面刷新后不能滚动缩放，或者刚打开时无法缩放，不知道是不是刷新后是不是页面没有加载完毕，干脆改成img.omload;下一步计划加载前获取大小，然后获取大小后执行这个函数
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,
ratioimg = oImg.width/oImg.height,//!!!这里是自己修改的，限定最小缩放
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*window.innerWidth,0.5 * screen.width, 0.5 * img.width)), //!!!这里是自己修改的，限定最小缩放
h = Math.max(parseInt(oImg.offsetHeight * ratioDelta), Math.min(0.5*window.innerWidth/ratioimg,0.5 * screen.width/ratioimg, 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';
btn100.innerHTML = (w/img.width*100).toFixed(0) + "%";
}
});
})();
};
//==================上面是从网上摘的=====================
var css_s = document.querySelectorAll("head > link"); //获取浏览器自带的图片css
css_s[0].href = ""; //删了，要不有冲突
css_s[1].href = ""; //删了，要不有冲突
css_s[2].href = ""; //删了，要不有冲突
//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 = window.location.href;
function align100(){// 加载完成执行
var le = 0.5*(window.innerWidth - img.width);
var to = 0.5*(window.innerHeight - img.height);
pic_xx.style.cssText = "box-shadow: 0px 2px 6px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24) !important;\
position:absolute;top:"+to+"px;left:"+le+"px;z-index:1;";
btn100.innerHTML = "100%";
}
pic_xx.onload = align100;
var btn100style = "border: none !important;\
font-size: 14px !important;\
font-weight: 200 !important;\
letter-spacing: 0em !important;\
line-height: 0em !important;\
height:24px !important;\
display: inline-block !important;\
outline: 0 !important;\
padding: 0px 12px !important;\
margin-top: 0px !important;\
margin-bottom: 10px !important;\
vertical-align: middle !important;\
overflow: hidden !important;\
text-decoration: none !important;\
color: #fff !important;\
text-align: center !important;\
transition: .2s ease-out !important;\
cursor: pointer !important;\
white-space: nowrap !important;\
box-shadow: 0px 2px 6px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24) !important;\
border-radius: 2px !important;";
//定义按钮的CSS
var btn100 = document.createElement("button"); //创建一个按钮
btn100.setAttribute("Id", "btn100"); //定义按钮ID
document.body.appendChild(btn100); //把按钮加到页面
btn100.style.cssText = "z-index:2;position:fixed;top:20px;left:20px;background-color: #2D8CF0;width:60px;opacity:0.3;" + btn100style;//确定按钮位置
btn100.onmouseover = function(){btn100.style.opacity = "1";}
btn100.onmouseout = function(){btn100.style.opacity = "0.3";}
btn100.innerHTML = "100.00%"; //按钮文本
btn100.onclick = align100; //给按钮加函数