Vue图片放大镜组件的封装使用详解

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
134
135
136
137
138
139
140
141
142
143
<template>
  <div>
    <div class="move" @mouseover="over()" @mouseout="out()" @mousemove="move($event)">
      <div id="small">  //小图片以及遮罩层容器
        <div id="float"></div>  //遮罩层
        <img :src="item" id="smallimg">  //需要放大的图片
      </div>
    </div>
    <div id="big">
      <img :src="item">    //放大以后的图片
    </div>
  </div>
</template>

<script>
  var float,smallimg,big,bigImg,small,float_maxJL_t,float_maxJL_l,bigImg_maxJL_t,bigImg_maxJL_l;

  export default{
    props: {
      item: {
        type: String
      }
    },
    data() {
     return{
     }
    }, 

    mounted(){
      float = document.getElementById("float"); //左侧遮罩层
      smallimg = document.getElementById("smallimg"); //左边的小图
      big = document.getElementById("big"); //右侧可视区域
      bigImg = big.getElementsByTagName("img")[0]; //右侧大图
      small = document.getElementById("small");// 左侧的容器

      //得到右侧可视区的宽高
      var bigW = big.clientWidth;
      var bigH = big.clientHeight;

      //右侧大图的宽高
      var bigImgW = bigImg.offsetWidth;
      var bigImgH = bigImg.offsetHeight;

      //左侧的小图的宽高
      var smallImgW = smallimg.offsetWidth;
      var smallImgH = smallimg.offsetHeight;

      //左侧遮罩层的宽高
      float.style.width =  bigW/bigImgW * smallImgW + "px";   //175
      float.style.height = bigH/bigImgH * smallImgH/3*2 + "px";     

      //遮罩层运动的最大距离
      float_maxJL_l = small.clientWidth -float.offsetWidth-10;
      float_maxJL_t = small.clientHeight - float.offsetHeight-5;

      //右侧图片运动的最大距离
      bigImg_maxJL_l = bigImg.clientWidth - big.offsetWidth;
      bigImg_maxJL_t = bigImg.clientHeight - big.offsetHeight;

      big.style.display = "none";
      float.style.visibility ="hidden"; //鼠标未移入左侧区域使遮罩层以及右侧大图均不可见
    },

    methods: {
    //鼠标移入左侧区域使遮罩层以及右侧大图可见
      over: function () {
        float.style.visibility ="visible";
        big.style.visibility ="visible";
        big.style.display = "block";
      }, 

      //鼠标移出左侧区域使遮罩层以及右侧大图不可见
      out: function () {
        float.style.visibility ="hidden";
        big.style.display = "none";
      }, 

      //鼠标移动时遮罩层随鼠标的移动而移动
      move: function (ev) {
        var l = ev.clientX  - small.offsetLeft - float.offsetWidth/2;
        var t = ev.clientY  - small.offsetTop - float.offsetHeight/2;

        if( l < 0 ) l = 0;     // 超出左边界赋值为0
        if( t < 0 ) t = 0;     // 超出上边界赋值为0

        if( l > float_maxJL_l ) l = float_maxJL_l;  //限制其运动范围在容器之内
        if( t > float_maxJL_t ) t = float_maxJL_t;

        //求出来一个比例
        var scaleL = l/float_maxJL_l;
        var scaleT = t/float_maxJL_t;

         //遮罩层运动位置
        float.style.left = l + "px";
        float.style.top = t + "px"; 

         //右侧大图运动位置
        bigImg.style.left = -scaleL * bigImg_maxJL_l + "px";
        bigImg.style.top = -scaleT * bigImg_maxJL_t + "px";
      },
    },
  }
</script>

//css样式
<style lang="scss" rel="stylesheet/scss" scoped>
  @import 'src/assets/scss/variable.scss';
  #float {
    width: 120px;
    height: 120px;
    position: absolute;     //必须
    background: $primary;
    border: 1px solid #ccc;
    opacity: 0.5;
    cursor:move ;
  }
  #big {
    position: absolute;  //必须
    top: 260px;
    left: 37.6%;
    width: 350px;
    height: 500px;
    overflow: hidden;
    border: 1px solid #ccc;
    background: #ffffff;
    z-index: 1;
    visibility: hidden;
  }
  #small {
    position: relative;  //必须
    z-index: 1;
    img{
      width:340px;
      height:320px;
    }
  }
  #big img {
    position: absolute;   //必须
    z-index: 5;
    width:700px;
    height:700px;
  }
</style>

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
move = function (ev){
        var scroll =  this.getClientHeight(); //得到当前界面移动的位置

        var l = ev.clientX  - small.offsetLeft - float.offsetWidth/2;
        var t = ev.clientY  - small.offsetTop - float.offsetHeight/2;

        t=t+scroll;  //遮罩层移动的高度应该相应的加上界面滚动的高度

        if( l < 0 ) l = 0;
        if( t < 0 ) t = 0; 

        if( l > float_maxJL_l ) l = float_maxJL_l;
        if( t > float_maxJL_t ) t = float_maxJL_t;

        var scaleL = l/float_maxJL_l;
        var scaleT = t/float_maxJL_t;

        float.style.left = l + "px";
        float.style.top = t + "px";

        bigImg.style.left = -scaleL * bigImg_maxJL_l + "px";
        bigImg.style.top = -scaleT * bigImg_maxJL_t + "px";
},
//获取界面滚动的高度的方法
getClientHeight: function(){
    var scrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop)
    {
      scrollTop=document.documentElement.scrollTop;
    }
    else if(document.body)
    {
      scrollTop=document.body.scrollTop;
    }
    return scrollTop;
}