我正在嘗試設定一個基本功能，以便在單擊時平滑地將 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 為中心。我目前正在嘗試為此目的使用 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>
uj5u.com熱心網友回復：
要滾動到單擊的專案，請使用$(this)[0].scrollIntoView();因為.scrollIntoView()是 JavaScript 函式，而不是 jQuery。
CSS 不支持從自動寬度到特定寬度或從相同到高度。參考：1 , 2
有一個技巧，使用max-width或max-height用于兩個 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>
看到它在行動
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/366463.html
標籤：javascript html css 动画片 切换
上一篇：選單串列：部分專案不顯示