Question

我有这个脚本用于调整图像大小（目前是image1.png），我试图让它调整大小被选中的图像的大小，以便我可以调整页面上任何选定图像的大小，这就是我所拥有的：

//<![CDATA[
$(window).load(function() {
  var orginalWidth = $("#image1").width();

  $("#infoSlider").text(orginalWidth + ', 100%');

  $("#slider").slider({
    value: 0,
    min: -50,
    max: 50,
    step: 10,
    slide: function(event, ui) {
      var fraction = (1 + ui.value / 100),
        newWidth = orginalWidth * fraction;

      $("#infoSlider").text(newWidth + ', ' + Math.floor(fraction * 100) + '%');

      $("#image1").width(newWidth);
    }
  });
}); //]]>

#slider {
  width: 200px;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<div id="slider"></div>
<span id="infoSlider"></span>

<div class="target">
  <img id="image1" src="http://boothtique.com/Pics/image1.png" />
  <img id="image2" src="http://boothtique.com/Pics/image2.png" />
  <img id="image3" src="http://boothtique.com/Pics/image3.png" />
</div>

Answer 1

您可以创建一个全局变量$image来保存所选的当前图像，并在点击监听器中创建如下：

$('.target > img').click(function(){
  $image = $(this);
});

并将$('#image1')替换为$image - 请参阅下面的演示：

＆＃13;

//<![CDATA[
var $image = $("#image1");
$(window).load(function() {
  
  var orginalWidth = $image.width();
  $("#infoSlider").text(orginalWidth + ', 100%');

  $("#slider").slider({
    value: 0,
    min: -50,
    max: 50,
    step: 10,
    slide: function(event, ui) {
      var fraction = (1 + ui.value / 100),
        newWidth = orginalWidth * fraction;

      $("#infoSlider").text(newWidth + ', ' + Math.floor(fraction * 100) + '%');

      $image.width(newWidth);
    }
  });
}); //]]>

$('.target > img').click(function(){
  $image = $(this);
});

＆＃13;

#slider {
  width: 200px;
}

＆＃13;

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<div id="slider"></div>
<span id="infoSlider"></span>

<div class="target">

  <img id="image1" src="http://boothtique.com/Pics/image1.png" />
  <img id="image2" src="http://boothtique.com/Pics/image2.png" />
  <img id="image3" src="http://boothtique.com/Pics/image3.png" />

</div>

＆＃13;

Answer 2

您可以为巡视图像添加新属性以保存最后点击的图像。

$(window).load(function(){
  var orginalWidth = {};
  $('[id^="image"]').each(function(idx, ele) {
    orginalWidth[ele.id] = $(ele).width();
  });


  $("#infoSlider").text(orginalWidth[$('[id^="image"][imgClicked="true"]').attr('id')] + ', 100%');

  $("#slider").slider({
    value: 0,
    min: -50,
    max: 50,
    step: 10,
    slide: function (event, ui) {
      var fraction = (1 + ui.value / 100),
          newWidth = orginalWidth[$('[id^="image"][imgClicked="true"]').attr('id')] * fraction;

      $("#infoSlider").text(newWidth + ', ' + Math.floor(fraction * 100) + '%');

      $('[id^="image"][imgClicked="true"]').width(newWidth);
    }
  });

  $('[id^="image"]').on('click', function(e) {
    $('[id^="image"]').attr('imgClicked', 'false');
    $(this).attr('imgClicked', 'true');
    $("#infoSlider").text(orginalWidth[this.id] + ', 100%');
  })
});

#slider {
  width : 200px;
}
img {
  width: 30%;
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<div id="slider"></div>
<span id="infoSlider"></span>

<div class="target">

    <img id="image1" imgClicked='true'  src="http://boothtique.com/Pics/image1.png" />
    <img id="image2" imgClicked='false' src="http://boothtique.com/Pics/image2.png" />
    <img id="image3" imgClicked='false' src="http://boothtique.com/Pics/image3.png" />

</div>

Answer 3

＆＃13;

[ 282356]  ERROR - jediterm.terminal.TerminalMode - Mode SmoothScroll is not implemented, setting to false 
[ 282356]  ERROR - jediterm.terminal.TerminalMode - Mode ReverseVideo is not implemented, setting to false 
[ 282357]  ERROR - jediterm.terminal.TerminalMode - Mode AutoRepeatKeys is not implemented, setting to true

＆＃13;

    $(window).load(function() {
    
    $('body').on('click','.imagecls',function(){
      $('.imagecls').removeClass('imgselected');
      $(this).addClass('imgselected');
      
    });
      var orginalWidth = $("#image1").width();
    
      $("#infoSlider").text(orginalWidth + ', 100%');
    
      $("#slider").slider({
        value: 0,
        min: -50,
        max: 50,
        step: 10,
        slide: function(event, ui) {
          var fraction = (1 + ui.value / 100),
            newWidth = orginalWidth * fraction;
    
          $("#infoSlider").text(newWidth + ', ' + Math.floor(fraction * 100) + '%');
    
          $('.imgselected').width(newWidth);
        }
      });
    });

＆＃13;

.imgselected
{
  border:2px solid red;
}

＆＃13;

单击图像时调整图像大小

3 个答案: