vue实现鸟瞰图

效果展示：

vue实现鸟瞰图

<template>
  <div id="demo">
     <div id="small-box">
         <div id="mark"></div>
         <div id="float-box"></div>
         <img src="img/1.jpg"/>
     </div>
     <div id="big-box">
        <img src="img/1.jpg"/>
     </div>
 </div>
</template>
<script>
  export default {
    name: "test",
    components: {
    },
    data() {
      return {
      };
    },
    mounted(){
       this.aerialView();
    },
    methods: {
      aerialView(){
        var objDemo = document.getElementById("demo");
        var objSmallBox = document.getElementById("small-box");
        var objMark = document.getElementById("mark");
        var objFloatBox = document.getElementById("float-box");
        var objBigBox = document.getElementById("big-box");
        var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
        if(objMark) {
            objMark.onmousedown = function(ev1){//移动浮标
            console.log(ev1)
                let _event1 = ev1 || window.event;  //兼容多个浏览器的event参数模式
                moveBuoy(_event1);
                objMark.onmousemove = function (ev) {
                    let _event = ev || window.event;  //兼容多个浏览器的event参数模式
                    moveBuoy(_event);
                }
                function remove(){
                    objMark.onmousemove = null;
                }
                document.addEventListener("mouseup",remove,false);
            }
        }
        if(objBigBox) {
            objBigBox.onscroll = function(e){//移动滚动条
                let left = objBigBox.scrollLeft;
                let top = objBigBox.scrollTop;
                //求其比值
                let percentX_s = left / (objBigBoxImage.offsetWidth - objBigBox.clientWidth);
                let percentY_s = top / (objBigBoxImage.offsetHeight - objBigBox.clientHeight);

                //设置浮标的位置
                objFloatBox.style.left = ((objMark.offsetWidth - objFloatBox.offsetWidth)*percentX_s) + "px";
                objFloatBox.style.top = ((objMark.offsetHeight - objFloatBox.offsetHeight)*percentY_s) + "px";
            }
        }
        function moveBuoy(_event){//移动浮标的封装代码
          	//避免拖动时选中文字
          	window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
         	let left = _event.clientX - objDemo.offsetLeft - objSmallBox.clientLeft - objFloatBox.offsetWidth / 2;
         	let top = _event.clientY - objDemo.offsetTop - objSmallBox.clientTop - objFloatBox.offsetHeight / 2;;
			//设置边界处理，防止移出小图片
			if (left < 0) {
				left = 0;
			} else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
				left = objMark.offsetWidth - objFloatBox.offsetWidth;
			}

			if (top < 0) {
				top = 0;
			} else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
				top = objMark.offsetHeight - objFloatBox.offsetHeight;
			}

			objFloatBox.style.left = left + "px";
			objFloatBox.style.top = top + "px";

			//求其比值
			let percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
			let percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);

			//设置滚动条
			objBigBox.scrollTop = percentY * (objBigBoxImage.offsetHeight - objBigBox.clientHeight);
			objBigBox.scrollLeft = percentX * (objBigBoxImage.offsetWidth - objBigBox.clientWidth);
        }
      },
    },
  };
</script>
<style>
	* {
		margin: 0;
		padding: 0
	}
	#demo {
		display: block;
		width: 1536px;
		height: 864px;
		position: relative;
	}
	#small-box {
		position: absolute;
		top:0;
		left:0;
		width: 10%;
		height: 10%;
		border: 1px solid #ffffcc;
		z-index: 3;
	}
	#small-box img{
		height:100%;
		width:100%;
	}
	#float-box {
		width: 50%;
		height: 50%;
		position: absolute;
		background: #ffffcc;
		filter: alpha(opacity=50);
		opacity: 0.5;
	}
	#mark {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		background-color: #fff;
		filter: alpha(opacity=0);//滤镜属性
		opacity: 0;
		z-index: 4;
	}
	#big-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		height: 50%;
		overflow: auto;
		z-index: 2;
	}
	#big-box img {
		position: absolute;
		z-index: 1;
	}
</style>