javascript - 图像对齐
问题描述
我有以下代码：
// Projects Script
document.addEventListener("DOMContentLoaded", function (event) {
// Select all the read more buttons and hidden contents
const readMoreButtons = document.querySelectorAll(".read-more"); const hiddenContents = document.querySelectorAll(".hidden");
// Now loop over the read more buttons
readMoreButtons.forEach((readMoreButton, index) => {
// Add onclick event listeners to all of them
readMoreButton.addEventListener("click", () => {
// Change content of read more button to read less based on the textContent
if (readMoreButton.textContent === "Read More") { readMoreButton.textContent = "Read Less"; }
else { readMoreButton.textContent = "Read More"; }
// Toggle class based on index
hiddenContents[index].classList.toggle("hidden");
})
})
})@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
color: white;
}
figure.snip1311 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
float: left;
overflow-y: auto;
overflow-x: hidden;
margin: 10px 1%;
min-width: 230px;
max-width: 360px;
max-height: 256px;
width: 500rem;
color: #ffffff;
text-align: left;
background-color: #07090c;
font-size: 16px;
-webkit-perspective: 50em;
perspective: 50em;
border: 3px solid #555;
}
figure.snip1311 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
figure.snip1311 img {
max-width: 110%;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
backface-visibility: hidden;
height: 258px;
}
figure.snip1311 figcaption {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: rotateX(90deg) translate(0%, -50%);
transform: rotateX(90deg) translate(0%, -50%);
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
z-index: 1;
opacity: 0;
padding: 0 30px;
}
figure.snip1311 h3,
figure.snip1311 p {
line-height: 1.5em;
}
figure.snip1311 h3 {
margin: 0;
font-weight: 800;
text-transform: uppercase;
}
figure.snip1311 p {
font-size: 0.8em;
font-weight: 500;
margin: 0 0 15px;
}
figure.snip1311 .read-more {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311 .read-more1 {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more1:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311:hover img,
figure.snip1311.hover img {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
opacity: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
}
figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
-webkit-transform: rotateX(0deg) translate(0, -50%);
transform: rotateX(0deg) translate(0, -50%);
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.hidden{
display:none;
}
.read-more{
cursor:pointer;
}
/* ScrollBar */
::-webkit-scrollbar {
width: 5px;
height: auto;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 3px transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwcNCA0NCA0HBwgIBw0HBwcHBw8ICQcNFREWFhUREx8YHSggGBoxJxMVITEhJSkrLi46Fx8zODMsNygtLisBCgoKDQ0NDw0NDisZFRkrKy0rKysrLTcrKystLTctLSsrKysrKysrKysrLS0rKysrNy0rLSstLSsrKysrKysrK//AABEIALwBDAMBIgACEQEDEQH/xAAaAAEBAQEBAQEAAAAAAAAAAAACAQMABwYF/8QAFhABAQEAAAAAAAAAAAAAAAAAAQAR/8QAGQEBAQEBAQEAAAAAAAAAAAAAAgABAwYF/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oADAMBAAIRAxEAPwD8HLsll2X23xNDLsllMpujlMnlMpuhlMnlEpuhlEnlEpugkUtMolFKzyiTSiWlrNKJNKZRSs0ilokUopQaJJKNFKCRSaUS0pWaRS0SKUUCLNi0cBik0i2lKCRSaRaOAxSbFooDGbTKOPs8pk8uy5vO6GUyeUym6GUy0ymU3WeXZPI5a3QyiTymUWhkW0SKU2UEok0ilFKDRJpG0pQSLaJFopWbFLRIpRygxSaRbSlBilokWilZsW0SLRygxZsUooDFmxbTjNozYtHAYzY0Ur7XLsnlMubzmhl2TymU3QymTymU3QymTymU3WaUSeUSi0IpNKWlKCRy0SKUUBIpNKJRSs0ok0i2lKCRZpFKKUEik0i0coRZtGijNi2iRS05WbGbFo4DFJsW0oCRZsWjgMUmxo4+4y7J5TLm81oZTJ5TKWhlMmlEotDKJPKJTZWaUSeUSilBIpNKJRSs0ok0jaUoJFtEilHGaUSaRSilBizYpacBik2LRQGLNItHAYs2LaUBizYtHGbFm0aOM2LNi2nAYzY0cfd5TJ5dlyeX0Mpk0plrdDIpaZRKLWeUSeUSi1nlEmlEopWaUSaRSilBIpNo0UrNItokW04zSjNi0UBg2jFo4DBtGLaUZsWbFo4DFJsWjgMWbFtOM2LNi0cBizYtpQGM2NHH32UyeXZcnltZ5TLRKJRazSmTSiU3WaUSaUbSlZsUtEilFKDFJpRKOVmkUtGCUUBIpaMGjgJFm0bTjNIs2LRQGLNItpwGDaMGjgMWbFo4DFmxbTjNizYtHAYs2LRQGE2Npx6FlMnlMuTymhlMnlEotZ5RJpRKbKzSKWiRSjlDIpNi2lKDFJpFo4CRSbFooDFmxaOM2LaMG04DFmxaOAxZsWjgMG0YNpwGLNg0cBizYtpQGLNi06RmxZsWigMWbG049EyiWmUS4vJazSiTSiUUrNIpaMW0pQSKTYtFKCRZpFo4CRZsW04zSLNi0cBizYtHAYNowaOAxZxbTgMWTFo4DFmxbTgMGbFo4DFkxaOAxZsW04DGTFo4DGbBtKPScok0olxeQ1mlEmkUopQSLNi0coJFmxbTgJBLRg0UBik2LRxmxZsW10gMWbBo4DFmxaOM2jJi2nAYs2DRwGLNi2nAYM2LRwGLJi0cFgzYtpwGDNi0cBjNjRx6WkUtEilxeOlBizYtpSgxZsWjjNizYtpwGDNi0cBg2jBo4DFmwbXSAxZsWjgMGbFo4DFkxbTgMWbBo4LBmxbTgMGbFo4DBmxaOCwZsG04LBmwadILGTGij09ik2LcXjYzYs2LRwGLJi2nAYM2LRwGLJi2nAYs2DTpAYs2DacBizYNHBYM2DTpBYM2DacFiyYtHAYsmLRwWDNg2nBYM2DRwWDNi2nAYsmLRwIsmLRx6iwZsG4vGQWDNg0cFgzYNrpBYM2DRwWDNg2nBYM2DTpBYM2DacFgzYNHBYM2DRwWDNg2nBYsmLTpBYM2DRwWDNg2nBYM2DRwWLJi2nAYsmLRwGLJi0cf/9k=);
border-radius: 10px;
} <div class="project-container">
<figure class="snip1311"><img src="https://static.wixstatic.com/media/d6f6df_dd155c086895409ab4f61f494fa3108b~mv2.png/v1/fill/w_440,h_320,al_c,q_85,usm_0.66_1.00_0.01/footprint.webp" alt="sample94"/>
<figcaption>
<h3>Sample Text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu.</p>
<div class="read-more">Read More</div>
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu. Quisque vehicula porttitor ultrices. Curabitur urna velit, auctor eget dignissim nec, commodo congue metus. Pellentesque leo ante, ullamcorper sit amet ornare eleifend, fringilla a ligula. Phasellus congue magna vitae purus pretium dapibus. Etiam in erat magna.</p>
</figcaption>
</figure>当你运行上面的代码时，看看滚动条是怎么出现在盒子上的？我希望将其隐藏，但仅在用户单击read more按钮后才出现。所以，预期的输出应该是隐藏在盒子上的滚动条，但我希望 y 轴滚动条只在用户单击read more按钮后出现。
实现这一点的方法是删除盒子上不必要的空间。例如，我将图像的高度设置为，258 px因为整个框的高度就是这个，所以我想删除多余的空间，这样滚动条就不会出现。它应该只在用户单击read more按钮后出现。有什么建议么？
解决方案
只需overflow-y hidden默认制作，并auto在切换时。
通过 * 方法获取按钮的滚动容器closest，然后以与切换hiddenContents.
*截至今天，nethod 的支持率为 95.3%，因此您可能需要closest替代方案，具体取决于您的客户性质。
// Projects Script
document.addEventListener("DOMContentLoaded", function(event) {
// Select all the read more buttons and hidden contents
const readMoreButtons = document.querySelectorAll(".read-more");
const hiddenContents = document.querySelectorAll(".hidden");
// Now loop over the read more buttons
readMoreButtons.forEach((readMoreButton, index) => {
// Add onclick event listeners to all of them
readMoreButton.addEventListener("click", () => {
// Change content of read more button to read less based on the textContent
if (readMoreButton.textContent === "Read More") {
readMoreButton.textContent = "Read Less";
} else {
readMoreButton.textContent = "Read More";
}
// Toggle class based on index
hiddenContents[index].classList.toggle("hidden");
readMoreButton.closest(".snip1311").classList.toggle("reading");
})
})
})@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
color: white;
}
figure.snip1311.reading {
overflow-y: auto;
}
figure.snip1311 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
float: left;
overflow-x: hidden;
overflow-y: hidden;
margin: 10px 1%;
min-width: 230px;
max-width: 360px;
max-height: 256px;
width: 500rem;
color: #ffffff;
text-align: left;
background-color: #07090c;
font-size: 16px;
-webkit-perspective: 50em;
perspective: 50em;
border: 3px solid #555;
}
figure.snip1311 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
figure.snip1311 img {
max-width: 110%;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
backface-visibility: hidden;
height: 258px;
}
figure.snip1311 figcaption {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: rotateX(90deg) translate(0%, -50%);
transform: rotateX(90deg) translate(0%, -50%);
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
z-index: 1;
opacity: 0;
padding: 0 30px;
}
figure.snip1311 h3,
figure.snip1311 p {
line-height: 1.5em;
}
figure.snip1311 h3 {
margin: 0;
font-weight: 800;
text-transform: uppercase;
}
figure.snip1311 p {
font-size: 0.8em;
font-weight: 500;
margin: 0 0 15px;
}
figure.snip1311 .read-more {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311 .read-more1 {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more1:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311:hover img,
figure.snip1311.hover img {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
opacity: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
}
figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
-webkit-transform: rotateX(0deg) translate(0, -50%);
transform: rotateX(0deg) translate(0, -50%);
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.hidden {
display: none;
}
.read-more {
cursor: pointer;
}
/* ScrollBar */
::-webkit-scrollbar {
width: 5px;
height: auto;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 3px transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwcNCA0NCA0HBwgIBw0HBwcHBw8ICQcNFREWFhUREx8YHSggGBoxJxMVITEhJSkrLi46Fx8zODMsNygtLisBCgoKDQ0NDw0NDisZFRkrKy0rKysrLTcrKystLTctLSsrKysrKysrKysrLS0rKysrNy0rLSstLSsrKysrKysrK//AABEIALwBDAMBIgACEQEDEQH/xAAaAAEBAQEBAQEAAAAAAAAAAAACAQMABwYF/8QAFhABAQEAAAAAAAAAAAAAAAAAAQAR/8QAGQEBAQEBAQEAAAAAAAAAAAAAAgABAwYF/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oADAMBAAIRAxEAPwD8HLsll2X23xNDLsllMpujlMnlMpuhlMnlEpuhlEnlEpugkUtMolFKzyiTSiWlrNKJNKZRSs0ilokUopQaJJKNFKCRSaUS0pWaRS0SKUUCLNi0cBik0i2lKCRSaRaOAxSbFooDGbTKOPs8pk8uy5vO6GUyeUym6GUy0ymU3WeXZPI5a3QyiTymUWhkW0SKU2UEok0ilFKDRJpG0pQSLaJFopWbFLRIpRygxSaRbSlBilokWilZsW0SLRygxZsUooDFmxbTjNozYtHAYzY0Ur7XLsnlMubzmhl2TymU3QymTymU3QymTymU3WaUSeUSi0IpNKWlKCRy0SKUUBIpNKJRSs0ok0i2lKCRZpFKKUEik0i0coRZtGijNi2iRS05WbGbFo4DFJsW0oCRZsWjgMUmxo4+4y7J5TLm81oZTJ5TKWhlMmlEotDKJPKJTZWaUSeUSilBIpNKJRSs0ok0jaUoJFtEilHGaUSaRSilBizYpacBik2LRQGLNItHAYs2LaUBizYtHGbFm0aOM2LNi2nAYzY0cfd5TJ5dlyeX0Mpk0plrdDIpaZRKLWeUSeUSi1nlEmlEopWaUSaRSilBIpNo0UrNItokW04zSjNi0UBg2jFo4DBtGLaUZsWbFo4DFJsWjgMWbFtOM2LNi0cBizYtpQGM2NHH32UyeXZcnltZ5TLRKJRazSmTSiU3WaUSaUbSlZsUtEilFKDFJpRKOVmkUtGCUUBIpaMGjgJFm0bTjNIs2LRQGLNItpwGDaMGjgMWbFo4DFmxbTjNizYtHAYs2LRQGE2Npx6FlMnlMuTymhlMnlEotZ5RJpRKbKzSKWiRSjlDIpNi2lKDFJpFo4CRSbFooDFmxaOM2LaMG04DFmxaOAxZsWjgMG0YNpwGLNg0cBizYtpQGLNi06RmxZsWigMWbG049EyiWmUS4vJazSiTSiUUrNIpaMW0pQSKTYtFKCRZpFo4CRZsW04zSLNi0cBizYtHAYNowaOAxZxbTgMWTFo4DFmxbTgMGbFo4DFkxaOAxZsW04DGTFo4DGbBtKPScok0olxeQ1mlEmkUopQSLNi0coJFmxbTgJBLRg0UBik2LRxmxZsW10gMWbBo4DFmxaOM2jJi2nAYs2DRwGLNi2nAYM2LRwGLJi0cFgzYtpwGDNi0cBjNjRx6WkUtEilxeOlBizYtpSgxZsWjjNizYtpwGDNi0cBg2jBo4DFmwbXSAxZsWjgMGbFo4DFkxbTgMWbBo4LBmxbTgMGbFo4DBmxaOCwZsG04LBmwadILGTGij09ik2LcXjYzYs2LRwGLJi2nAYM2LRwGLJi2nAYs2DTpAYs2DacBizYNHBYM2DTpBYM2DacFiyYtHAYsmLRwWDNg2nBYM2DRwWDNi2nAYsmLRwIsmLRx6iwZsG4vGQWDNg0cFgzYNrpBYM2DRwWDNg2nBYM2DTpBYM2DacFgzYNHBYM2DRwWDNg2nBYsmLTpBYM2DRwWDNg2nBYM2DRwWLJi2nAYsmLRwGLJi0cf/9k=);
border-radius: 10px;
}<div class="project-container">
<figure class="snip1311"><img src="https://static.wixstatic.com/media/d6f6df_dd155c086895409ab4f61f494fa3108b~mv2.png/v1/fill/w_440,h_320,al_c,q_85,usm_0.66_1.00_0.01/footprint.webp" alt="sample94" />
<figcaption>
<h3>Sample Text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu.</p>
<div class="read-more">Read More</div>
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu. Quisque vehicula porttitor ultrices. Curabitur
urna velit, auctor eget dignissim nec, commodo congue metus. Pellentesque leo ante, ullamcorper sit amet ornare eleifend, fringilla a ligula. Phasellus congue magna vitae purus pretium dapibus. Etiam in erat magna.</p>
</figcaption>
</figure>推荐阅读
- machine-learning - 在机器学习算法的背景下，什么是“刷新率”？
- python - 如何制作具有多个根树的圆形树
- python - 如何更改启动画面中的图像
- android - 如何修复 kotlin 中的 WebView SSL 错误处理程序问题，以便通过 Google Play 审核
- python - 为什么在控制台中可单击复选框但在 Selenium 代码中不可单击？
- javascript - 如何检查我是否刚刚接受了 java 脚本中的不和谐服务器邀请
- delphi - 读取 TZipFile 的内存泄漏
- javascript - 如何从 forkJoin 返回处理后的结果
- java - 如何覆盖 Map 的主要方法
- sql - SQL 选择列中具有最大值的行