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

4

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

Хорошо, что я писал ответ на 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
  • Спасибо большое то, то нужно 1 авг 2016 в 4:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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