【自用】直接跳转图片 - netbian.com - Початковий код

Greasy Fork is available in English.
【自用】直接跳转图片 - netbian.com

7/19/2021, 7:13:46 PM
Задати запитання, залишити відгук, або повідомити про скрипт.
Wrap lines
// ==UserScript==
// @icon        https://github.com/favicon.ico
// @name        【自用】直接跳转图片 - netbian.com
// @namespace   Violentmonkey Scripts
// @match       http://www.netbian.com/desk/*.htm
// @Update URL  https://greasyfork.org/zh-CN/scripts/429609/versions/new
// @grant       none
// @version     2021.10.28
// @author      -
// @description 7/19/2021, 7:13:46 PM
// ==/UserScript==
 
function addNewStyle(newStyle) {//增加新样式表
    var styleElement = document.getElementById('styles_js');
    if (!styleElement) {
        styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        styleElement.id = 'styles_js';
        document.getElementsByTagName('head')[0].appendChild(styleElement);
    }
    styleElement.appendChild(document.createTextNode(newStyle));
}
 
const cssa =`
.wrap,#header {z-index:0 !important;}
#login_opacity_bg {height:0px !important;}    /*登录提示隐藏*/
div.tbox {height:0px !important;}    /*登录提示隐藏*/
`
 
addNewStyle(cssa);
 
 
//*绑定事件*/
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);
            pic_xx.style.transitionDuration = "0s";//缩放时过渡关了，要不不跟手  
            return false;
        });
    })();
    //*以鼠标位置为中心的滑轮放大功能*/
    (function () {
        addWheelEvent(oImg, function (delta) {
            var img = new Image(); // 创建一个新的img，不过也不设定属性，相当于一个备份，后台应该是加载了，会有img.width产生，而且不操作它，因此是个定量 //这里得重新定义一个
            img.src = oImg.src;
            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), 0.5 * screen.width), //!!!这里是自己修改的，限定最小缩放
            h = Math.max(parseInt(oImg.offsetHeight * ratioDelta), 0.5 * screen.width/ratioimg), //!!!这里是自己修改的，限定最小缩放
            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 pct = (w/img.width*100).toFixed(0);
                btn100.innerHTML =  pct + "%";
                pic_xx.style.transitionDuration = "0s";//缩放时过渡关了，要不不跟手
            }
 
        });
    })();
};
 
 
 
//===================================看图相关============================================
var grey_bg = document.createElement("div"); //创建一个DIV用来当透明背景
grey_bg.setAttribute("Id", "grey_bg_div"); //定灰背景的ID
var imgbox_s = document.createElement("div"); //创建装预览图的div，必须得有个div做fixed的容器，要不滚轮就往下翻页了
var pic_xxs = document.createElement("img"); //创建预览图img
imgbox_s.setAttribute("Id", "imgbox_s_div"); //定预览图的div的ID
pic_xxs.setAttribute("Id", "pic_xx_img_s"); //定预览图的ID
var imgbox = document.createElement("div"); //创建装原图片的div
var pic_xx = document.createElement("img"); //创建原图img
imgbox.setAttribute("Id", "imgbox_div"); //定原图片的div的ID
pic_xx.setAttribute("Id", "pic_xx_img"); //定原图的ID
 
document.body.appendChild(grey_bg); //灰背景加到页面
document.getElementById("grey_bg_div").appendChild(imgbox_s); //预览图的div层加到透明背景
document.getElementById("imgbox_s_div").appendChild(pic_xxs); //预览图加到div里
document.getElementById("grey_bg_div").appendChild(imgbox); //原图的div层加到透明背景
document.getElementById("imgbox_div").appendChild(pic_xx); //原图加到透明背景
 
//下面给灰背景加属性，默认高度0来隐藏，转移符后面不能乱加空格
grey_bg.style.cssText = "position:fixed;\
top:0px;\
left:0px;\
width:100%;\
height:0px;\
background-color: rgb(0, 0, 0, 0.8);\
text-align:center;\
padding:0;\
margin:0;\
vertical-align:middle;"; //定CSS
 
imgbox_s.style.cssText = "top:0px;left:0px;padding:0px;"; //padding缩边,margin是扩，但后续因为还有一个div，这里直接就设成0
 
function img_prev(a) { //【当前页面打开图片】后面添加到每一个链接
    grey_bg.style.height = "100%";//开灰背景
 
    imgbox_s.style.height = "100%";//开预览图div
    imgbox.style.height = "0";//关大图div
    pic_xxs.style.cssText = "padding:20px !important;height:100%;box-sizing:border-box;";//开预览图
    pic_xxs.setAttribute("src", a.getAttribute("href"));//设定链接
    return; //这里得加，要不drag运行后，都变成false了
}
 
function close_prev() {   //【关闭打开的图片】点击非图片部分
    grey_bg.style.height = "0%"; //关闭灰背景
    pic_xxs.style.height = "0px"; //关闭预览
    pic_xxs.setAttribute("src", ""); //清空缓存，要不刚点开还是上次加载的图片
    pic_xx.style.height = "0px"; //关闭原图
    pic_xx.setAttribute("src", ""); //清空缓存，要不刚点开还是上次加载的图片
    imgbox_s.style.width = "100%"; //恢复宽度
    spancl.style.display = "none";//显示关闭按钮
    current = 0;
    btnrt.style.display = "none";//显示
    btn100.style.display = "none";//显示
    pic_xx.style.transitionDuration = "0s";//缩放时过渡关了，要不不跟手
}
 
function full_view() {    //【100%大小，可拖动】
    event.stopPropagation(); //!!!!!!!!不加这个，会穿透到父元素的事件！！！！！
    var img_url = document.getElementById("pic_xx_img_s").src;// + "?" + Date.parse(new Date()); //重构地址    //看来没必要加随机后缀，有的网站不知道是不是防外链，重构就无法加载例如DA和wallhaven
    var imghid = new Image(); // 创建一个新的img，不过也不设定属性，相当于一个备份，后台应该是加载了，会有img.width产生，而且不操作它，因此是个定量
    imghid.src = img_url;
    var le = 0.5 * (window.innerWidth - imghid.width);
    var to = 0.5 * (window.innerHeight - imghid.height);
    imgbox_s.style.height = "0";//关预览图div
    imgbox.style.height = "100%";//关预览图div
    imgbox.style.position = "fixed";//关预览图div
    pic_xxs.style.height = "0"; //关预览图
    pic_xx.style.height = ""; //开预览图
    pic_xx.setAttribute("src", img_url);//预览图地址
    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:99;";
    imgbox_s.style.width = "0px"; //这里不清零，后面drag函数运行后图片初始靠右了
    spancl.style.display = "block";//显示关闭按钮
    btnrt.style.display = "block";//显示
    btn100.style.display = "block";//显示
    return false;//阻止默认，注意这里只阻止了点击pic_xxs的默认事件
}
 
grey_bg.onclick = close_prev; //点击关闭
pic_xxs.onclick = full_view; //点击看100%大小
pic_xx.onclick = function(){event.stopPropagation();}; //单独设定阻止默认，不能放到上面那个函数里面，不知道为什么，多层触发？
 
//===================================备份链接、替换链接============================================
var dir_links = "div#main div.endpage div.pic p a"; //这里的规则需要按网站修改    ◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀
var anchors = document.querySelectorAll(dir_links); //用CSS选择器获取目标链接
var linkbak = "";
for (i = 0; i < anchors.length; i++) {
    linkbak += "<a href=" + anchors[i] + ">" + i + "</a>" + "<br>"; //+=两个符号不能分开
} //把原链接重构一下，变相的深拷贝，后续直接写入html不会出现object NodeList
 
var divbak = document.createElement("div"); //创建一个DIV用来储存链接
divbak.setAttribute("Id", "baklink"); //定ID
//document.getElementById("wrapper").appendChild(btn);
document.body.appendChild(divbak); //div加到页面最后
divbak.style.cssText = "position:fixed;top:500px;left:0px;     display:none;       "; //改DIV的位置，然后隐藏一下     display:none;
 
for (var i = 0; i < anchors.length; i++) {
  var dirimg_links = document.querySelectorAll("div#main div.endpage div.pic p a img");   
  anchors[i].href = dirimg_links[i].src; //这里的规则需要按网站修改     ◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀
    anchors[i].target = "_blank";
    anchors[i].onclick = function() {
        img_prev(this);
        return false;
    }; //添加函数
} //.replace替换.slice修剪，最后加一个后缀，新标签页打开          //这里开始修改目标链接
var linkbakQ = "";
for (i = 0; i < anchors.length; i++) {
    linkbakQ += "<a href=" + anchors[i] + ">" + [i + anchors.length] + "</a>" + "<br>"; //[i+anchors.length]必须用中括号，要不当成字符串相加了
} //把原链接重构一下，变相的深拷贝，后续直接写入html不会出现object NodeList
divbak.innerHTML = linkbak + linkbakQ; //把链接写到新建的DIV中   ！！这里的位置是在修改原链接之后，也没事，证明之前重构成功了
var backedlink = document.querySelectorAll("div#baklink a"); //获取储存的链接,  !!!注意必须得重新获取，直接用会是undefine
 
function reslink() {
    for (var i = 0; i < anchors.length; i++) {
        anchors[i].href = backedlink[i].href; //
    }
}; //定义恢复链接的函数
 
function writelink() {
    for (var i = 0; i < anchors.length; i++) {
        anchors[i].href = backedlink[i + anchors.length].href; //
    }
}; //定义重写链接的函数
 
 
var spancl = document.createElement("span"); //创建一个按钮
spancl.setAttribute("Id", "spancl"); //定义按钮ID
document.body.appendChild(spancl); //把按钮加到页面
spancl.style.cssText = "cursor: pointer;\
    position: fixed;\
    right: 0px;\
    top: 0px;\
    width: 46px;\
    background: url(\"data: image / png;base64, iVBORw0KGgoAAAANSUhEUgAAAC4AAAARCAIAAAAt9wkYAAA\
AGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw / eHBh\
Y2tldCBiZWdpbj0i77u / IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8 + IDx4OnhtcG1ldGEgeG1sbnM6eD0i\
YWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0x\
NDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1ze\
W50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3\
hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6L\
y9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG\
9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0I3NzA1RDAxQ0Y3MTFFMkJGMTU4MTc4OEQ2N0Mz\
QjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0I3NzA1RDExQ0Y3MTFFMkJGMTU4MTc4OEQ2N0MzQjkiPiA8eG1wTU06RGV\
yaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQjc3MDVDRTFDRjcxMUUyQkYxNTgxNzg4RDY3QzNCOSIgc3RSZ\
WY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQjc3MDVDRjFDRjcxMUUyQkYxNTgxNzg4RDY3QzNCOSIvPiA8L3JkZjpEZXNjcmlwdGl\
vbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI / PmUW1owAAADqSURBVHja5FWxCoQwDL2W + x\
4X / QmHujvXzV0XadHN31HUn2gR / KD2AgWRAytETpTLEF5eSfqaaEvyPH / dw97W2rtIMcY8uytKKQeiKPKTP5fSdZ0DSZKE\
YQhAa72SdV0japIsy3D9XPdjjIHv + 96FUkpPFqV0VwrnHD3dpmm + GCHEwdEJ2VVpTlhVVdtaEB6m2H2j9oTN87yVAuFhikcl\
viuw8TAMWykQAonuCvJeWZZlmiaHy7IE37Yt + HEc4zgOggBREzmgVUdRFI4B4BhYwg2IpGl65ZXq + ZmvfoM838MfP4fPGNBH\
gAEAi7gyuvHuhZcAAAAASUVORK5CYII =\") no-repeat center bottom;\
    height: 17px;\
    opacity: 0.9;\
    border: none;\
    padding: 0;\
    padding-top: 0px;\
    background-color: #1771FF;\
    display:none;\
    z-index:9999999999999999999999999999";
spancl.onclick = close_prev;//点击关闭
 
 
 
 
 
var btnstyle = "border: none !important;\
width:60px;\
font-size: 12px !important;\
font-weight: 200 !important;\
letter-spacing: 0em !important;\
line-height: 0em !important;\
height:24px !important;\
display: inline-block;\
outline: 0 !important;\
padding: 3px 12px !important;\
margin-top: 15px !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:0px  !important;\
opacity:0.3;";
//定义按钮的CSS
 
function align100(){// 加载完成执行
var img_url = document.getElementById("pic_xx_img_s").src;// + "?" + Date.parse(new Date()); //重构地址    //看来没必要加随机后缀，有的网站不知道是不是防外链，重构就无法加载例如DA和wallhaven
var img = new Image(); // 创建一个新的img，不过也不设定属性，相当于一个备份，后台应该是加载了，会有img.width产生，而且不操作它，因此是个定量
    img.src = img_url;
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;z-index:2;left:"+le+"px;top:"+to+"px;";
btn100.innerHTML = "100%";
current = 0;
}
 
var btn100 = document.createElement("button"); //创建一个按钮
btn100.setAttribute("Id", "btn100"); //定义按钮ID
document.body.appendChild(btn100); //把按钮加到页面
btn100.style.cssText = "z-index:1;position:fixed;top:460px;left:20px;background-color: #2D8CF0;display:none !important;" + btnstyle; //改变按钮位置
btn100.onmouseover = function(){btn100.style.opacity = "1";} 
btn100.onmouseout = function(){btn100.style.opacity = "0.3";} 
btn100.innerHTML = "100%"; //按钮文本
btn100.onclick = align100; //给按钮加函数
 
 
 
var btnrt = document.createElement("button"); //创建一个按钮
btn100.setAttribute("Id", "btnrt"); //定义按钮ID
document.body.appendChild(btnrt); //把按钮加到页面
btnrt.style.cssText = "z-index:1;position:fixed;top:420px;left:20px;background-color: #FC5531;display:none  !important;" + btnstyle; //改变按钮位置
btnrt.onmouseover = function(){btnrt.style.opacity = "1";} 
btnrt.onmouseout = function(){btnrt.style.opacity = "0.3";} 
btnrt.innerHTML = "右转"; //按钮文本
var current = 0;//这里必须赋值，还得在函数外面
btnrt.onclick =function rotate90(){
      current = current + 90;
      pic_xx.style.transform = 'rotate('+ current +'deg)';
      pic_xx.style.transitionDuration = "0.3s";//加一个过渡，没那么楞
}
 
 
var btnre = document.createElement("button"); //创建一个按钮
btnre.setAttribute("Id", "btnre"); //定义按钮ID
document.body.appendChild(btnre); //把按钮加到页面
btnre.style.cssText = "position:fixed;z-index:0;top:500px;left:20px;background-color: #1EA362;" + btnstyle; //改变按钮位置,z-index取负值能在greylayer下面
btnre.innerHTML = "恢复"; //按钮文本
btnre.onclick = reslink; //给按钮加函数
btnre.onmouseover = function(){btnre.style.opacity = "1";} 
btnre.onmouseout = function(){btnre.style.opacity = "0.3";} 
 
var btnwr = document.createElement("button"); //创建一个按钮
btnwr.setAttribute("Id", "btnwr"); //定义按钮ID
document.body.appendChild(btnwr); //把按钮加到页面
btnwr.style.cssText = "position:fixed;z-index:0;top:540px;left:20px;background-color: #e9686b;" + btnstyle;  //改变按钮位置,z-index取负值能在greylayer下面
btnwr.innerHTML = "重写"; //按钮文本
btnwr.onclick = writelink; //给按钮加函数
btnwr.onmouseover = function(){btnwr.style.opacity = "1";} 
btnwr.onmouseout = function(){btnwr.style.opacity = "0.3";}