根據鼠標位置移動（翻譯+過渡）全景照片

我有以下情況：我有一個居中的全景照片（圖片的右側和左側部分在屏幕上不可見）。根據鼠標位置移動（翻譯+過渡）全景照片

我想的是，根據鼠標位置（與圖像的中間X）的照片：

- >移動（彷彿在虛擬遊）向左（如果鼠標在照片的右側）;

- >向右移動（如果鼠標位於圖片的左側部分）;

- >並返回到初始居中位置（當鼠標位於圖片之外時）。

這是我試過（只在一個方向上的運動，但我想/需要兩個方向）：

<head> 
<style type="text/css"> 
    #smartdemo3 { 
    width: 75%; 
    overflow: hidden; 
    } 

    #smartdemo3 img:hover { 
    transform: translate3d(-200px, 0px, 0px); 
    transition: transform 5s linear; 
    } 

    #smartdemo3 img { 
    transition: 4s all ease-in-out; 
    } 
</style> 
</head> 

<body> 
<div id="smartdemo3"> 
    <img src="../images/Panint1.jpg" /> 
</div> 
</body> 
</html>

我怎麼能這樣做呢？

謝謝。

來源

2016-02-14 colombo2003

這個怎麼樣？

小提琴演示：https://jsfiddle.net/os0moz5j/1/

HTML

<div class="panorama default"> 
    <img src="https://unsplash.it/2500/500?image=914"> 
</div>

CSS

.panorama{ width:400px; height:200px; margin:100px; overflow:hidden; position:relative; } 
.panorama img{ height:200px; width:auto; position:absolute; left:0; } 

.panorama.default img{ left:50%; transform:translateX(-50%); transition:all .2s ease; }

$('.panorama').on('mousemove',function(e){ 
    mousePos = e.pageX - $(this).offset().left; 
    eleWidth = $(this).outerWidth(); 
    imgWidth = $(this).find('img').outerWidth(); 
    relativeMousePos = mousePos/eleWidth; 
    imgPos = (imgWidth - eleWidth) * relativeMousePos; 
    $(this).find('img').css('transform','translateX(-'+imgPos+'px)'); 
}); 

$('.panorama').on('mouseenter',function(){ 
    $(this).removeClass('default'); 
}).on('mouseleave',function(){ 
    $(this).addClass('default'); 
    $(this).find('img').css('transform',''); 
});

來源

2016-02-14 22:55:26 rorymorris89

非常感謝您的幫助。我想，雖然圖片會在鼠標位於圖片兩側時自動移動。如果我將鼠標指向右側（鼠標仍然沒有移動），則圖片向左移動，反之亦然。另外，如果我想讓圖片移動得慢一點，那就足以修改panorama.default.img中的過渡值。此外，要有一個完美居中的圖片，我需要修改什麼？萬分感謝您的幫助。 – colombo2003

根據鼠標位置移動（翻譯+過渡）全景照片

回答

相關問題