Question

我有以下情况：我有一张居中的全景照片（图片的右侧和左侧部分在屏幕上看不到）。

我想这样，取决于鼠标位置（与图片中间X相关）的图片：

- ＆GT;移动（就像在虚拟游览中一样）向左移动（如果鼠标位于照片的右侧）;

- ＆GT;向右移动（如果鼠标位于图片的左侧部分）;

- ＆GT;然后回到初始居中位置（当鼠标在图片之外时）。

这是我尝试的方式（仅在一个方向上移动;但我想/需要两个方向）：

<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>

我怎么能这样做？

谢谢。

Answer 1

这个怎么样？

小提琴演示：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; }

JS

$('.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','');
});

根据鼠标位置移动（平移+过渡）全景照片

1 个答案: