4

Дан блок с фиксированной шириной и высотой. Внутри блока картинка, с размером более, чем родитель. Как реализовать передвижение этой картинки внутри блока без полос прокрутки?

Результат:  эффект перемещения (Drag) картинки схожий с перемещением как на картах. В примере используются: main_div как родительский элемент, а "Info_Rectangle" как дочерний элемент.

.Info_Rectangle {
  height:1065px;
  background: blue;
  position: absolute;
  width: 1065px;
  z-index: 0;
  font-size: 70px;
}


.main_div{
	width:900px;
	height:900px;
}
<div class="main_div">
<div  class="Info_Rectangle ui-widget-content"><img src="http://usiter.com/uploads/20130424/tekstura+gazeti+starie+gazeti+gazeta+staraya+gazeta+oboi+gazeta+begraund+gazeti+38812160027_9631.jpg">  </div>
</div>

P.S. Как создать подобный эффект без jquery?

1 ответ 1

5

Полчаса писал вчера вам содержательный ответ, соорудил большой и красивый пример, а вдруг "вы не можете опубликовать ответ, так как вопрос был удален". Обидно, однако. Не делайте так больше.

Хорошо, что я писал ответ на jsfiddle в своем аккаунте: https://jsfiddle.net/ipshenicyn/480gg35o/ Код рабочего примера с jsfiddle ниже (сниппеты здесь шалят второй день, поэтому пока plaintext).

По вопросу "нужна ли JQ UI": смотрите сами. Если вопрос только в простом перетаскивании этой картинки и вам подойдет мой код - нет нужды подключать жирную и медленную либу.

HTML

<div id="box" class="box">
  <img id="src" src="http://www.newyorker.com/wp-content/uploads/2015/12/Veix-Goodbye-New-York-Color-1200.jpg"/>
</div>

CSS

.box{
  width: 500px;
  height: 500px;
  border: 30px solid green;
  background-color: white;
  overflow: hidden;
}
.box img{
  cursor: move;
  position: relative;
}

JS

$(function(){
  var drag = false;
  $("#src").on('mousedown', function(e){
    drag = true;
  }).on('mouseup mouseout', function(){
    $(this).data({
        startX: 0,
        startY: 0,
    });
    drag = false;
  }).on('mousemove', function(e){
    e.preventDefault();
    if(drag){
      console.log($(this).data(),e);
      var left = parseInt($(this).css('left')) || 0,
          top = parseInt($(this).css('top')) || 0,
          newLeft = left + (e.clientX - ($(this).data().startX || e.clientX)),
          newTop  = top + (e.clientY - ($(this).data().startY || e.clientY)),
          parentHeight = $(this).parent().height(),
          parentWidth = $(this).parent().width(),
          imgHeight = $(this).height(),
          imgWidth = $(this).width();


      $(this).css({
        left: newLeft < 0 && (Math.abs(newLeft - parentWidth) < imgWidth) ? newLeft : left,
        top: newTop < 0 && (Math.abs(newTop - parentHeight) < imgHeight) ? newTop : top
      }).data({
          startX: e.clientX,
          startY: e.clientY,
      });
    }
  })
})
1
  • Спасибо большое то, то нужно Commented 1 авг. 2016 в 4:37

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.