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

时间:2016-02-14 22:20:18

标签: javascript html css

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

我想这样,取决于鼠标位置(与图片中间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>

我怎么能这样做?

谢谢。

1 个答案:

答案 0 :(得分:0)

这个怎么样?

小提琴演示: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','');
});