我正在尝试设置一个基本功能，以便在单击时平滑地将 img 从比屏幕长切换到显示在显示器上(适合窗口大小)(来回)。它已经在使用百分比等工作了。
我的问题是我想在 2 个状态之间进行平滑的动画过渡，但 img 正在被残酷地缩放。 此外，每当我尝试使用"过渡"或"动画"时，当 img 恢复到其原始大小时，它会阻止滚动。在我尝试使用关键帧后发生了同样的问题。
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
width: 90vw;
box-sizing: border-box;
}
.scaled {
width: auto;
height: 100vh;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(".item").click(function() {
$(this).toggleClass('scaled');
$(this).scrollIntoView();
});
</script>
</html>
此外，每当缩放 img 时，我都希望窗口视图(我的意思是页面上滚动的位置)以 img 为中心。我目前正在尝试为此目的使用scrollIntoView，但似乎没有任何反应。
提前谢谢你。第一次在这里发帖。我觉得这应该不会太难，但可能会与我现在能弄清楚的水平不同 ଘ(੭ˊᴗˋ)੭ ̀ˋ
<小时 />还尝试了以下方法，但 img 停留在 90vw 和 100vh ...
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
width: 90vw;
box-sizing: border-box;
object-fit: contain;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(".item").click(function() {
if ($(this).hasClass('scaled')) {
$(this).animate({
height: "none",
width: "90vw"
}, 1000);
$(this).removeClass('scaled');
}
else {
$(this).animate({
width: "none",
height: "100vh"
}, 1000);
$(this).addClass('scaled');
}
});
</script></html>
要滚动到单击的项目，请使用$(this)[0].scrollIntoView();.scrollIntoView()因为这是JavaScript函数，而不是jQuery。
平滑缩放(过渡)。
CSS 不支持从自动宽度到特定宽度或相同的高度过渡。编号： 1， 2
选项 1.请改用一侧。
您只能使用max-height或max-width。好消息是你写的JavaScript和CSS响应式(媒体查询)也支持，没有任何添加。不好的是它只支持一侧(宽度或高度)。
完整代码：
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
max-width: 100vw;
box-sizing: border-box;
transition: all .3s;
}
.scaled {
max-width: 50vw;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(".item").click(function() {
$(this).toggleClass('scaled');
$(this)[0].scrollIntoView({
behavior: "smooth"
});
});
</script>
</html>
查看实际效果
选项 2.使用 JavaScript。
下面的代码将使用大量的JavaScript来使CSS过渡从宽度到高度正常工作。好事：原因支持宽度和高度之间的过渡。坏事：响应式图像的CSS媒体查询将无法正常工作。为此需要更多的JS。
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
box-sizing: border-box;
transition: all .3s;
height: auto;
width: 90vw;
}
.scaled {
height: 100vh;
width: auto;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(window).on("load", function() {
// wait until all images loaded.
// loop each <img> that has class `item` and set height.
$('img.item').each((index, item) => {
$(item).attr('data-original-height', $(item)[0].offsetHeight);
$(item).css({
'height': $(item)[0].offsetHeight
});
});
});
$(".item").click(function() {
if ($(this).hasClass('scaled')) {
// if already has class `scaled`
// going to remove that class after this.
if ($(this).attr('data-scaled-width') === undefined) {
// get and set original width to data attribute.
$(this).attr('data-scaled-width', $(this)[0].offsetWidth);
}
$(this).css({
'height': $(this).data('originalHeight'),
'width': ''
});
$(this).removeAttr('data-original-height');
$(this).removeClass('scaled');
} else {
// if going to add `scaled` class.
if ($(this).attr('data-original-height') === undefined) {
// get and set original height to data attribute.
$(this).attr('data-original-height', $(this)[0].offsetHeight);
}
$(this).css({
'height': '',
'width': $(this).data('scaledWidth')
});
$(this).removeAttr('data-scaled-width');
$(this).addClass('scaled');
// check again to make sure that width has been set.
if ($(this)[0].style.width === '') {
setTimeout(() => {
console.log($(this)[0].style.width);
$(this).css({
'width': $(this)[0].offsetWidth
});
console.log('css width for image was set after added class.');
}, 500);// set timeout more than transition duration in CSS.
}
}
$(this)[0].scrollIntoView({
behavior: "smooth"
});
});
</script>
</html>
查看实际效果