Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | 7x | const defaults = { zoom: 0.10, // 每次缩放的百分比 // canZoomin: false, // 是否允许放大 // canZoomout: false, // 是否允许缩小 // MaxZoomin: undefined, // 最大放大值 // MaxZoomout: undefined, // 最小缩小值 // allowWheel: false, // 是否允许滚轮缩放 }; class Zoom { constructor(img, wrapper, options = {}) { this.img = img; this.wrapper = wrapper; this.settings = Object.assign(options, defaults); this.loadWrap = this.load.bind(this); // Do nothing in IE8 if (typeof window.getComputedStyle !== 'function') return; if (this.img.complete) this.load(); this.img.addEventListener('load', this.loadWrap); } destroyed() { if (this.img) this.img.removeEventListener('load', this.loadWrap); } load() { if (this.img.src === this.cachedDataUrl) return; const computedStyle = window.getComputedStyle(this.wrapper, null); this.initWidth = this.width = parseInt(computedStyle.width); this.initHeight = this.height = parseInt(computedStyle.height); this.radio = this.width / this.height; this.wrapper.left = parseInt(computedStyle.left); this.wrapper.top = parseInt(computedStyle.top); if (this.settings.allowWheel) this.wrapper.onwheel = this.onwheel.bind(this); this.wrapper.onmousedown = this.draggable.bind(this); } // 重置为初始值 reset() { this.wrapper.style.width = this.initWidth + 'px'; this.wrapper.style.height = this.initHeight + 'px'; this.wrapper.style.left = (window.innerWidth - this.initWidth) / 2 + 'px'; this.wrapper.style.top = (window.innerHeight - this.initHeight) / 2 + 'px'; } // 缩放图片 zoom(zoomin = true, e = {}) { // 设置不可缩放返回 if ((zoomin && !this.settings.canZoomin) || (!zoomin && !this.settings.canZoomout)) return; const rect = this.wrapper.getBoundingClientRect(); // 鼠标相对图片左上角的偏移量 const offsetX = e.pageX ? e.pageX - rect.left - window.pageXOffset : this.width / 2; const offsetY = e.pageY ? e.pageY - rect.top - window.pageYOffset : this.height / 2; const computedStyle = window.getComputedStyle(this.wrapper, null); this.wrapper.left = parseInt(computedStyle.left); this.wrapper.top = parseInt(computedStyle.top); let tempZoom; if (zoomin) { // 根据是否超出最大放大倍数调整缩放比 tempZoom = (this.settings.MaxZoomin && (this.width * (1 + this.settings.zoom)) > this.settings.MaxZoomin) ? this.settings.MaxZoomin / this.width - 1 : this.settings.zoom; this.wrapper.left -= offsetX * tempZoom; this.wrapper.top -= offsetY * tempZoom; this.width *= (1 + tempZoom); this.height *= (1 + tempZoom); } else { tempZoom = (this.settings.MaxZoomin && (this.width / (1 + this.settings.zoom)) < this.settings.MaxZoomout) ? this.width / this.settings.MaxZoomout - 1 : this.settings.zoom; this.wrapper.left += offsetX * tempZoom; this.wrapper.top += offsetY * tempZoom; this.width /= (1 + tempZoom); this.height /= (1 + tempZoom); } this.wrapper.style.width = this.width + 'px'; this.wrapper.style.height = this.height + 'px'; this.wrapper.style.left = this.wrapper.left + 'px'; this.wrapper.style.top = this.wrapper.top + 'px'; } zoomin() { this.zoom(); } zoomout() { this.zoom(false); } // 滚轮事件 onwheel(e) { let deltaY = 0; e.preventDefault(); if (e.deltaY) { // FireFox 17+ (IE9+, Chrome 31+?) deltaY = e.deltaY; } else if (e.wheelDelta) deltaY = -e.wheelDelta; this.zoom(deltaY < 0, e); } draggable(e) { e.preventDefault(); this.previousEvent = e; const drag = (e) => { e.preventDefault(); this.wrapper.left += (e.pageX - this.previousEvent.pageX); this.wrapper.top += (e.pageY - this.previousEvent.pageY); this.wrapper.style.left = this.wrapper.left + 'px'; this.wrapper.style.top = this.wrapper.top + 'px'; this.previousEvent = e; }; const removeDrag = () => { this.wrapper.onmouseup = null; this.wrapper.onmousemove = null; }; this.wrapper.onmouseup = removeDrag.bind(this); this.wrapper.onmousemove = drag.bind(this); } } export default Zoom; |