您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Greasy Fork is available in English.
知乎图片查看
// ==UserScript== // @name fix zhihu imagepreview 知乎图片查看 // @namespace http://tampermonkey.net/ // @version 0.51 // @description 知乎图片查看 // @author You // @match https://www.zhihu.com/question/* // @match https://zhuanlan.zhihu.com/p/* // @require https://cdn.bootcss.com/document-register-element/1.11.1/document-register-element.js // @grant none // ==/UserScript== (function() { 'use strict'; let cssprop = function createCss({rotate}) { return { transform: `translate(-50%) rotate(${rotate})`, position: 'relative', left: '50%', top: '20px', cursor: 'default', } } function Ztest(value = 0) { let img = document.querySelector('.ImageView img') img.parentNode.style.overflow = "auto" let pro = cssprop({ rotate: value + 'deg' }) for (let key in pro) { img.style[key] = pro[key] } } class MyControl extends HTMLElement { constructor() { super() // Attach a shadow root to the element. let shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style> :host { display: block; position: fixed; right: 20px; top: 50%; width: 120px; transform: translate(0, -50%); z-index: 10000; color: #fff; } :host img { max-width: 50px } :host input { width: 30px } </style> <div> <input type="range" value="0" step="5" min="0" max="360" style="width: 120px"/> <div>度</div> </div> <div> <input type="range" value="20" step="1" min="0" max="1000" style="width: 120px"/> <div>top</div> </div> <div> <input type="range" value="1" step="0.1" min="0" max="3" style="width: 120px"/> <div>放大</div> </div> `; shadowRoot.children[1].children[0].addEventListener('input', (e) => { let _value = Number.parseFloat(e.target.value) if (!Number.isNaN(_value)) { shadowRoot.children[1].children[1].textContent = '角度: ' +_value + '度' let _transform = this.img.style.transform this.img.style.transform = _transform.replace(/rotate\(\w+\)/g, 'rotate('+_value+'deg)') } }) shadowRoot.children[2].children[0].addEventListener('input', (e) => { let _value = Number.parseFloat(e.target.value) shadowRoot.children[2].children[1].textContent = 'top: ' +_value + '高' this.img.style.top = _value + 'px' }) shadowRoot.children[3].children[0].addEventListener('input', (e) => { let _value = Number.parseFloat(e.target.value) shadowRoot.children[3].children[1].textContent = '倍数: ' + _value + '倍' this.img.style.width = (this.imgWidth * _value) + 'px' }) this._shadowRoot = shadowRoot } show() { let degree = 0 let top = 20 let bei = 2 this.img = document.querySelector('.ImageView img') this.imgWidth = this.img.clientWidth this._shadowRoot.children[1].style.display = null this._shadowRoot.children[2].style.display = null this._shadowRoot.children[3].style.display = null Ztest(0) this._shadowRoot.children[1].children[0].value = degree this._shadowRoot.children[1].children[1].textContent = '角度: ' + degree + '度' this._shadowRoot.children[2].children[0].value = top this._shadowRoot.children[2].children[1].textContent = 'top: ' + top + '高' this._shadowRoot.children[3].children[0].value = bei this._shadowRoot.children[3].children[1].textContent = '倍数: ' + bei + '倍' this.img.style.width = (this.imgWidth * bei) + 'px' } hide() { this._shadowRoot.children[1].style.display = 'none' this._shadowRoot.children[2].style.display = 'none' this._shadowRoot.children[3].style.display = 'none' } } customElements.define('my-control', MyControl) let mycontrol = new MyControl() var targetNode = document.body var config = { attributes: false, childList: true, subtree: true }; var callback = function(mutationsList) { for(var mutation of mutationsList) { // console.log(mutation if (mutation.addedNodes && mutation.addedNodes[0] && mutation.addedNodes[0].innerHTML.indexOf('ImageView') > -1 ) { console.log("bang") setTimeout(function() { mycontrol.show() Ztest() }, 0) } if (mutation.removedNodes && mutation.removedNodes[0] && mutation.removedNodes[0].innerHTML.indexOf('ImageView') > -1 ) { setTimeout(function() { mycontrol.hide() }, 0) } } }; var observer = new MutationObserver(callback); observer.observe(targetNode, config); document.body.appendChild(mycontrol) mycontrol.hide() })();