jquery实现鹰眼功能

html

<div class="parent">
     <div
         id="canvas"
         class="canvas"
     ></div>
</div>

css

.parent {
	height: 100%;
    width: 100%;
    position: relative;
    overflow: auto;
}
#canvas {
    width: 3000px;
    height: 1200px;
    overflow: auto;
    position: relative;
}
// 鹰眼样式
#minimap #selectWin {
    z-index: 1000;
}
#minimap #selectWin .selectionWin {
    position: absolute;
    background-color: #346789;
    opacity: 0.5;
}
#minimap {
    position: absolute;
    bottom: 10px;
    right: 10px;
    overflow: hidden;
    border: 3px solid #dbdbdb;
    background-color: white;
}
#minimapContainer {
    width: 100%;
    height: 100%;
    position: relative;
}
#minimap #selectWin,
  #minimap #miniview {
    position: absolute;
    top: 0;
    left: 0;
}
#minimap .mainContainer {
    transform-origin: left top 0;
    background-color: #d2ddc6;
}

js

// 初始化鹰眼
mounted () {
	this.miniViewObj = MiniView.init({
	    selector: '#canvas'
	})
	// 监听滚动条
	window.addEventListener('scroll', this.handleScroll, true)
},
methods: {
	handleScroll () {
      this.$nextTick(() => {
        this.infoMiniView()
      })
    },
    /**
     * 通知鹰眼
     */
    infoMiniView () {
      if (this.miniViewObj) {
        this.miniViewObj.refresh()
      }
    }
},
destroyed () {
      window.removeEventListener('scroll', this.handleScroll)
}

鹰眼jquery

import jquery from 'jquery'
import 'jquery-ui-dist/jquery-ui'

let miniViewObject = {
  selector: null,
  zoom: 0.05,
  viewZoom: 1,
  refresh: function (config) {
    this.getParams(config)
    var selector = this.selector
    var p = ['webkit', 'moz', 'ms', 'o']
    var oString = 'left top'

    if (config && config.viewZoom) { this.viewZoom = config.viewZoom }

    var el = jquery(selector).clone().removeAttr('style')
    var s = 'scale(' + this.zoom + ')'
    var parentDiv = jquery(selector).parent()
    for (var i = 0; i < p.length; i++) {
      el[0].style[p[i] + 'Transform'] = s
      el[0].style[p[i] + 'TransformOrigin'] = oString
    }
    el[0].style['transform'] = s
    el[0].style['transformOrigin'] = oString
    jquery('#miniview ' + selector + 'Mini').remove()
    // 设置小地图背景图片及背景大小(获取canvas设置为背景)
    jquery('#miniview').css({
      'background-image': 'url(' + jquery(selector)[0].querySelector('canvas').toDataURL() + ')',
      'background-size': jquery(selector).width() * this.zoom + 'px' + ' ' + jquery(selector).height() * this.zoom + 'px'
    })
    // 设置小地图大小
    jquery('#selectWin, #miniview').css({
      width: jquery(selector).width() * this.zoom,
      height: jquery(selector).height() * this.zoom
    })
    // 因为有3px的边框，所以宽高应分别+6
    jquery('#minimap').css({
      width: jquery(selector).width() * this.zoom + 6,
      height: jquery(selector).height() * this.zoom + 6
    })

    // 设置选择框大小
    jquery('.selectionWin').css({
      width: parentDiv.width() * this.zoom / this.viewZoom,
      height: parentDiv.height() * this.zoom / this.viewZoom
    })

    // 设置选择框位置
    // 右侧信息框开关会影响选择框在最右侧的位置
    var selLeft = jquery(selector).parent().scrollLeft()
    var selTop = jquery(selector).parent().scrollTop()
    jquery('.selectionWin').css({
      left: selLeft * this.zoom / this.viewZoom,
      top: selTop * this.zoom / this.viewZoom
    })
  },
  getParams: function (config) {
    if (!config) return false
    if (config.selector) this.selector = config.selector
    if (config.zoom) this.zoom = config.zoom
    if (config.viewZoom) this.viewZoom = config.viewZoom
  }
}
let miniView = {
  init: function (config) {
    miniViewObject.getParams(config)
    var selector = config.selector
    var parentDiv = jquery(selector).parent()
    parentDiv.after('<div id="minimap">' +
                '<div id="minimapContainer">' +
                '<div id="selectWin">' +
                '<div class="selectionWin"></div>' +
                '</div>' +
                '<div id="miniview"></div>' +
                '</div>' +
                '</div>')
    // 拖拽效果
    jquery('.selectionWin').draggable({
      containment: 'parent',
      drag: function () {
        var selectionLeft = parseInt(jquery('.selectionWin').css('left'))
        var selectionTop = parseInt(jquery('.selectionWin').css('top'))
        jquery(miniViewObject.selector).parent().scrollLeft(selectionLeft / (miniViewObject.zoom / miniViewObject.viewZoom))
        jquery(miniViewObject.selector).parent().scrollTop(selectionTop / (miniViewObject.zoom / miniViewObject.viewZoom))
      }
    })
    miniViewObject.refresh()
    return miniViewObject
  }
}

export default miniView

注意：

1. 移动的元素是元素的left、top还是滚动条的滚动距离
2. 获取小地图和遮罩层的width和height
3. 设置遮罩层的位置
4. 是否需要根据遮罩层的left和top去设置画布的left和top(如果是设置移动滚动条则不需要)