站长
    首页 > 知道 > 站长 > 前端问题 > 正文

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

发布于 2021-11-27 06:58 分类：推广求助

项目是用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去掉就正常了，但要求是垂直居中显示

已解决 悬赏分：80 - 解决时间 2021-11-27 12:26
反对 0举报 0 收藏 0

回答1

最佳
  • @
    @cchwdl

    当我们使用了绝对定位后，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; /\* 有了这个就自动居中了 \*/ 
}

    比较好的方案

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

    支持 0 反对 0 举报
    2021-11-27 07:09