我想实现一个页面中的放大镜效果，居中显示，但交互有问题？

Question

项目是用angular做的

<div  class\="wrapper"\>

<div  id\="small"  style\="float: left; margin-right: 10px;"\>

<img  src\="../../assets/images/1.png"\>

<p  id\="move"\></p\>

</div\>

<div  id\="big"  style\="float: left;"\>

<img  src\="../../assets/images/1.png"  id\="big\_img"\>

</div\>

</div\>

.wrapper {

overflow: auto;

position: absolute;

left: 50%;

top: 50%;

transform: translate(\-50%, \-50%);

white-space: nowrap;

}

  

#small {

width: 300px;

height: 200px;

border-radius: 4px;

position: relative;

}

  

#small  img {

width: 100%;

height: 100%;

display: block;

}

  

#big {

width: 300px;

height: 200px;

overflow: hidden;

position: relative;

border: 1px  solid  #eee;

border-radius: 4px;

display: none;

}

  

#big\_img {

position: absolute;

left: 0px;

top: 0px;

}

  

#move {

width: 100px;

height: 100px;

background: #000;

opacity: .5;

position: absolute;

display: none;

left: 0px;

top: 0px;

}

let  move = document.getElementById('move');

let  small = document.getElementById('small');

let  big = document.getElementById('big');

let  big\_img = document.getElementById('big\_img');

small.onmousemove = function(event){

// let \_event = event || window.event;

small.style.cursor = 'move';

// 计算move移动块的left值

let  move\_left = event.clientX - small.offsetLeft - move.offsetWidth/2;

// 计算move移动块的top值

let  move\_top = event.clientY - small.offsetTop - move.offsetHeight/2;

// 超出左边界赋值为0

move\_left = move\_left < 0 ? 0 : move\_left;

// 超出右边界赋值为盒子宽度-移动块的宽度

move\_left = move\_left > small.offsetWidth - move.offsetWidth ? small.offsetWidth - move.offsetWidth : move\_left;

// 超出上边界赋值为0

move\_top = move\_top < 0 ? 0 : move\_top;

// 超出下边界赋值为盒子高度-移动块高度

move\_top = move\_top > small.offsetHeight - move.offsetHeight ? small.offsetHeight - move.offsetHeight : move\_top;

// 修改移动块left、top值

  

move.style.left = move\_left + 'px';

move.style.top = move\_top + 'px';

/\*

计算图片需要移动的坐标

  

距离左边left 图片宽度 盒子宽度 距离左边left 图片宽度 盒子宽度

big\_x/(big\_img.offsetWidth-big.offsetWidth) = move\_left/(small.offsetWidth-move.offsetWidth);

  

big\_y/(big\_img.offsetHeight-big.offsetHeight) = move\_top/(small.offsetHeight-move.offsetHeight);

  

\*/

  

let  big\_x = move\_left/(small.offsetWidth\-move.offsetWidth) \* (big\_img.offsetWidth\-big.offsetWidth);

let  big\_y = move\_top/(small.offsetHeight\-move.offsetHeight) \* (big\_img.offsetHeight\-big.offsetHeight);

// 修改图片定位

big\_img.style.left = -big\_x + 'px';

big\_img.style.top = -big\_y + 'px';

}

  

small.onmouseover = function(){

move.style.display = 'block';

big.style.display = 'block';

}

  

small.onmouseout = function(){

move.style.display = 'none';

big.style.display = 'none';

}

如果将.wrapper那一层div去掉就正常了，但要求是垂直居中显示

Answer 1

当我们使用了绝对定位后，margin：0 auto就失效了，怎么解决这种现象呢？

1、兼容写法

div { 
    width: 400px; 
    height: 200px;
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-top: -100px; /\* 高度的一半 \*/
    margin-left: -200px; /\* 宽度的一半 \*/ 
 }

优点：兼容性好；缺点：必须知道宽高。

2、CSS3写法

div { 
    width: 400px; 
    height: 200px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); /\* 50%为自身尺寸的一半 \*/ 
}

优点：不用管元素的尺寸；缺点：兼容性可能不好。

3、margin: auto

div { 
    width: 400px; 
    height: 200px; 
    position: absolute; 
    left: 0; top: 0; right: 0; bottom: 0; 
    margin: auto; /\* 有了这个就自动居中了 \*/ 
}

比较好的方案

给你参考一下，看看能解决你居中的问题不