我有一个报告页面，其中有菜单，页眉，页脚等。但是，我想选择一个选项，即可以通过转换将报告内容放大到全窗口大小（而不是全屏）。我正在尝试以下示例：
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_zoom_hover
我的主要问题是我不能让它过渡运动，而不仅仅是扩大运动。它立即跳到左上角，而没有任何过渡，而100％宽度和100％高度过渡起作用。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.zoom {
background-color: green;
width: 200px;
height: 200px;
margin: auto;
}
.zoom:hover {
transition: all 1s;
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>
</body>
</html>我一直在寻找解决方案，但是大多数结果都是关于全屏而不是全窗口的。
问题是您将位置更改为，fixed并且top/left值正在立即考虑跳跃。另外，我不认为有CSS解决方案可以通过仅在悬停时指定top/从静态位置过渡到固定位置left。转换的规则是具有初始值和最终值。
这里的一个想法是依靠一些JS来设置top/left值的初始值，并使过渡工作正常：
function getPosition(element) {
var xPosition = 0,
yPosition = 0;
while (element) {
xPosition += (element.offsetLeft + element.clientLeft);
yPosition += (element.offsetTop + element.clientTop);
element = element.offsetParent;
}
return {
x: (xPosition - document.documentElement.scrollLeft || document.body.scrollLeft),
y: (yPosition - document.documentElement.scrollTop || document.body.scrollTop)
};
}
var e=document.querySelector('.zoom');
var pos = getPosition(e);
e.style.left=pos.x+ 'px';
e.style.top=pos.y + 'px';* {
box-sizing: border-box;
}
.zoom {
background-color: green;
width: 200px;
height: 200px;
margin: auto;
}
.zoom:hover {
transition: all 1s;
top: 0!important;
left: 0!important;
position: fixed;
width: 100%;
height: 100%;
}<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>为了更准确，您需要调整窗口滚动和窗口调整大小的值：
function getPosition(element) {
var xPosition = 0,
yPosition = 0;
while (element) {
xPosition += (element.offsetLeft + element.clientLeft);
yPosition += (element.offsetTop + element.clientTop);
element = element.offsetParent;
}
return {
x: (xPosition - document.documentElement.scrollLeft || document.body.scrollLeft),
y: (yPosition - document.documentElement.scrollTop || document.body.scrollTop)
};
}
var e = document.querySelector('.zoom');
var pos = getPosition(e);
e.style.left = pos.x + 'px';
e.style.top = pos.y + 'px';
window.addEventListener('scroll', function() {
var pos = getPosition(e);
e.style.left = pos.x + 'px';
e.style.top = pos.y + 'px';
});
window.addEventListener('resize', function() {
var pos = getPosition(e);
e.style.left = pos.x + 'px';
e.style.top = pos.y + 'px';
});* {
box-sizing: border-box;
}
.zoom {
background-color: green;
width: 200px;
height: 200px;
margin: auto;
}
.zoom:hover {
transition: all 1s;
top: 0!important;
left: 0!important;
position: fixed;
width: 100%;
height: 100%;
}<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句