项目是用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
收藏 0
分享 1
回答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; /\* 有了这个就自动居中了 \*/ }
比较好的方案
给你参考一下,看看能解决你居中的问题不
支持 0 反对 0 举报2021-11-27 07:09