Question

我想在此站点https://alpine-groupemichel.com/alpine-a110中重新创建图像的可拖动事件。

我设法拖动了光标，但是我不知道如何在光标左边的offset（）..之后调整图像的大小。

<section id="wide-description" class="third">
     <div class="container-fluid">
       <div class="row">
         <div class="-wide-image relative">
          <div class="slide-img relative">
            <img src="https://alpine-groupemichel.com/sites/default/files/c7de023e669081e77b86f9854f99672101ecfe5f.jpeg" alt="NOUVELLE ALPINE A110" class="img-responsive">
            <div class="sliding-image">
              <img src="https://alpine-groupemichel.com/sites/default/files/8ee728e0ec67b7adf195fb8b26dd20373c6869cf.jpeg" alt="NOUVELLE ALPINE A110">
            </div>
            <span id="drag-cursor">
              <span id="slider-cursor"></span>
            </span>
          </div>
          <div class="modelRevealInfos">
            <div class="row">
              <div class="col-md-6 col-sm-6 col-xs-6 no-padding">
                1103kg<br> 
                252 ch<br>                        4,5 s 0-100km/h<br>                      </div>
              <div class="col-md-6 col-sm-6 col-xs-6 no-padding">
                 4 180 mm<br>                        1 798 mm<br>                          1 252 mm<br>
              </div>
            </div>
          </div>
         </div>
       </div>
     </div>
</section>





$(document).ready(function(){
    var cursor = $('#drag-cursor');
    var img = $('.sliding-img');
    var xPos=0;
    cursor.draggable({
        axis: 'x',
        containment: $('.relative'),      
        drag: function(xPos) {
            var offset = $(this).offset();
            var xPos = offset.left;
            console.log(xPos);
        }
    });
});

Answer 1

我认为您可以使用可调整大小而不是可拖动。像这样的东西：

  $( function() {
    $( "#resizable" ).resizable({
      maxHeight: 250,
      maxWidth: 350,
      minHeight: 250,
      minWidth: 1,
      containment: "#container"
    });
  } );

#resizable, #container {background-image: url('http://lorempixel.com/400/400/')}
#resizable { width: 200px; height: 250px;  filter: grayscale(100%);}
#container { width: 400px; height: 250px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<div id="container">

<div id="resizable" class="ui-widget-content">

</div></div>

Answer 2

我找到了解决方法：

$(document).ready(function(){
    $('.sliding-image img').css("width",$(window).width());
    $(window).resize(function() {
      $('.sliding-image img').css("width",$(window).width());
    });
    if( $('#drag-cursor').length ){
      $( "#drag-cursor" ).draggable({
        axis: "x",
        containment: $('-wide-img'),
        drag : function( event, ui ) {
          var offset = $(this).offset();
          var xPos = offset.left;
          $('.sliding-image').css("width",xPos);
        }
      });
    };
});

如何使用jQuery（可拖动和可调整大小）拖动光标时调整图像大小

2 个答案: