项目是用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去掉就正常了，但要求是垂直居中显示
实现页面中的放大镜效果，通常需要结合JavaScript和CSS来完成。以下是一个基础的实现思路：
HTML结构： ```html
CSS样式：css
.container {
position: relative;
}
.small-image {
display: inline-block;
}
.magnifier-container {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.magnifier-glass {
position: absolute;
border: 2px solid #ccc;
border-radius: 50%;
cursor: move;
/ Set the size of your magnifying glass /
width: 200px;
height: 200px;
}
JavaScript交互（使用jQuery示例）：javascript
var smallImage = $('#small-image');
var magnifierGlass = $('.magnifier-glass');
var magRatio = 3; // 放大倍数
magnifierGlass.on('mousemove', function(e) { var parentOffset = $(this).parent().offset(); var x = e.pageX - parentOffset.left; var y = e.pageY - parentOffset.top;
// 防止超出小图边界 x = Math.max(0, x); y = Math.max(0, y); x = Math.min(x, smallImage.width() - magnifierGlass.width()); y = Math.min(y, smallImage.height() - magnifierGlass.height());
magnifierGlass.css({ left: x, top: y });
// 更新大图的位置和尺寸以模拟放大效果 var largeImg = new Image(); largeImg.src = smallImage.attr('src'); var放大Width = smallImage.width() * magRatio; var放大Height = smallImage.height() * magRatio; var destX = -(x * magRatio - magnifierGlass.width() / 2); var destY = -(y * magRatio - magnifierGlass.height() / 2);
$('.magnifier-container').css({
'background-image': 'url("' + largeImg.src + '")',
'background-position': ${destX}px ${destY}px,
'background-size': ${放大Width}px ${放大Height}px
});
});
```
这个例子中，鼠标在放大镜内移动时，会根据鼠标位置实时改变大图的背景位置，从而达到放大镜的效果。请注意，这只是一个基本的实现方式，可能需要根据你的实际需求进行调整。
同时，请确保你已经在项目中引入了jQuery库。
