Как реализовать подобную фишку на js, jq? [требует правки]

496

02 марта 2018, 16:20

Внутри контейнера должно находиться изображение превышающее его размеры. Нужен механизм перемещения изображения по наведению мышкой в пределах контейнера, чтобы увидеть скрытие части картинки. Контейнер имеет свойство overflow: hidden; (Навели в правую часть контейнера - увидели правую часть изображения). Все должно работать без скачков.

вот разметка+стили.

<https://jsfiddle.net/ugdeLzyc/2/>

Нужно сделать так, как описано выше: при наведении на верхний правый угол видно правый верхний сектор картинки и т.д.

Answer 1

border нужно чтобы было видно края картинки с некоторым запасом.

$( ".container" ).mousemove(function( event ) { 
  var border = 50; 
  var x=event.pageX-$(this).offset().left; 
  var y=event.pageY-$(this).offset().top; 
  var newx=(x/$(this).width())*($("img", this).width()-$(this).width()+2*border)-border; 
  var newy=(y/$(this).height())*($("img", this).height()-$(this).height()+2*border)-border; 
  $("img", this).css({left: -newx, top: -newy}); 
});

.container { 
  position:relative; 
  width: 300px; 
  height: 300px; 
  overflow: hidden; 
} 
.container img { 
  position:relative; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <img src="http://foto-babochek.ru/images/risunok-babochki_25.jpg" alt=""> 
</div>