如何根據圖片的高度來翻譯圖片？

我有一個高大的形象，這是在一個不高的股利。我想通過翻譯來展示整個圖像。這是我到目前爲止有：如何根據圖片的高度來翻譯圖片？

document.addEventListener("mouseover", function(event) { 
 
    var element = event.target; 
 
    if (element.classList.contains("myImage") && 
 
    element.naturalWidth < element.naturalHeight) { 
 
    element.className += " imageScroll"; 
 

 

 
    //element.style.transform = "translate(0,-" + element.naturalHeight + ")"; 
 
    //element.style.mozTransition = "translate(0,-" + element.naturalHeight + ")"; 
 
    //element.style.msTransform = "translate(0,-" + element.naturalHeight + ")"; 
 
    //element.style.oTransform = "translate(0,-" + element.naturalHeight + ")"; 
 
    //element.style.webkitTransform = "translate(0,-" + element.naturalHeight + ")"; 
 
    } 
 
}); 
 
document.addEventListener("mouseout", function(event) { 
 
    var element = event.target; 
 
    if (element.classList.contains("myImage")) { 
 
    element.className = element.className.replace(
 
     /(?:^|\s)imageScroll(?!\S)/g, '' 
 
    ); 
 
    } 
 
});

div { 
 
    height: 200px; 
 
    overflow: hidden; 
 
    background-color: red; 
 
} 
 
img { 
 
    -moz-transition: all 3s ease-in-out; 
 
    -o-transition: all 3s ease-in-out; 
 
    -webkit-transition: all 3s ease-in-out; 
 
    transition: all 3s ease-in-out; 
 
} 
 
.imageScroll { 
 
    -moz-transform: translate(0, -350px); 
 
    -ms-transform: translate(0, -350px); 
 
    -o-transform: translate(0, -350px); 
 
    -webkit-transform: translate(0, -350px); 
 
    transform: translate(0, -350px); 
 
}

<div> 
 
    <img src="https://placeimg.com/300/800/any" class="myImage" alt="SomeImage"> 
 
</div>

然而，我無法弄清楚如何圖像高度翻譯。只要圖像底部可見，我就希望滾動停止。我不知道圖像會有多高，所以我不能在CSS中對它進行硬編碼。這就是爲什麼我嘗試在JavaScript中設置樣式，但這不適用於我（請參閱註釋代碼）。

我的問題：如何讓圖像在鼠標懸停時一直向下滾動，並在圖像底部到達時停止滾動？我無法滾動過去的高度，否則我會得到醜陋的空白空間。我試圖用純JavaScript完成這項工作，沒有jQuery。誰可以幫忙？

來源

2016-06-10 ohyeah

純CSS，你可以使用百分比單位的翻譯，然後減去容器的高度使用頂部的偏移量（位置絕對值）：

div { 
 
    height: 200px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.myImage { 
 
    transition: all 3s ease-in-out; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
} 
 

 
.myImage:hover { 
 
    top: 100%; 
 
    transform: translateY(-100%); 
 
}

<div> 
 
    <img src="https://placeimg.com/300/800/any" class="myImage" alt="SomeImage"> 
 
</div>

的jsfiddle：https://jsfiddle.net/azizn/h37dLzgf/1/

來源

2016-06-10 09:33:29 Aziz

非常接近！但在calc方法中使用200px會導致白色間距。你碰巧知道如何做到這一點沒有這樣的硬編碼量？ – ohyeah

@ ohyeah白色空間在哪裏？我沒有看到它 – Aziz

@ ohyeah確保使用css重置 – seahorsepip

已註釋掉的代碼已丟失「px」

element.style.transform = "translate(0,-" + element.naturalHeight + "px)"; 
element.style.mozTransition = "translate(0,-" + element.naturalHeight + "px)"; 
element.style.msTransform = "translate(0,-" + element.naturalHeight + "px)"; 
element.style.oTransform = "translate(0,-" + element.naturalHeight + "px)"; 
element.style.webkitTransform = "translate(0,-" + element.naturalHeight + "px)";

來源

2016-06-10 09:35:37

感謝您指出這一點！我改變了我的代碼，但這並沒有解決我的問題。 – ohyeah

如何根據圖片的高度來翻譯圖片？

回答

相關問題