javascript - 单击图像调整图像大小

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 - 请参见下面的演示:

//<![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);
});

#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>