Question

我试过以下。它适用于小提琴。但不能使用HTML。在吸尘时，Imgae会被装载，但不会调整大小。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var current_h = $('img').height();
var current_w = $('img').width();

        $('.resize').hover(
        function () {
            $(this).stop(true, false).animate({
                width: (current_w * 3.15),
                height: (current_h * 3.15)
            }, 300);
        }, function () {
            $(this).stop(true, false).animate({
                width: current_w + 'px',
                height: current_h + 'px'
            }, 300);
        });
</script>
</head>
<body>
<div class="box">
    <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250"/>
</div>
</body>
</html>

＆＃13;

这里有任何问题吗？

Answer 1

您需要执行onload - 您的代码在图像存在之前运行：

$(function() { // when the page has loaded
  var current_h = $('img').height();
  var current_w = $('img').width();

  $('.resize').hover(
    function() {
      $(this).stop(true, false).animate({
        width: (current_w * 3.15),
        height: (current_h * 3.15)
      }, 300);
    }, function() {
      $(this).stop(true, false).animate({
        width: current_w + 'px',
        height: current_h + 'px'
      }, 300);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="box">
  <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250" />
</div>

如果您有多个图像，可以将每个图像大小保存在img的数据属性中 - 我还将高度添加到图像标记。

$(function() { // when the page has loaded
  $(".box img").each(function() {
    $(this).data("w",$(this).width());
    $(this).data("h",$(this).height());
  });
  $('.resize').hover(
    function() {
      $(this).stop(true, false).animate({
        width: ($(this).data("w") * 3.15),
        height: ($(this).data("h") * 3.15)
      }, 300);
    }, function() {
      $(this).stop(true, false).animate({
        width: $(this).data("w") + 'px',
        height: $(this).data("h") + 'px'
      }, 300);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="box">
  <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250" height="250" />
</div><div class="box">
  <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250" height="250" />
</div>

Answer 2

尝试在$(document).ready()中包装您的函数。因为您的代码在加载图像之前运行。

以下是一个工作示例

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var current_h = $('img').height();
      var current_w = $('img').width();
      $('.resize').hover(
        function() {
          $(this).stop(true, false).animate({
            width: (current_w * 3.15),
            height: (current_h * 3.15)
          }, 300);
        }, function() {
          $(this).stop(true, false).animate({
            width: current_w + 'px',
            height: current_h + 'px'
          }, 300);
        });
    });
  </script>
</head>

<body>
  <div class="box">
    <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250" />
  </div>
</body>

</html>

Answer 3

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
  
  $(document).ready(function(){
      var current_h = $('img').height();
var current_w = $('img').width();

        $('.resize').hover(
        function () {
            $(this).stop(true, false).animate({
                width: (current_w * 3.15),
                height: (current_h * 3.15)
            }, 300);
        }, function () {
            $(this).stop(true, false).animate({
                width: current_w + 'px',
                height: current_h + 'px'
            }, 300);
        });
  
  });
</script>
</head>
<body>
<div class="box">
    <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250"/>
</div>
</body>
</html>

Answer 4

尝试以下

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){ // Note this line
var current_h = $('img').height();
var current_w = $('img').width();

        $('.resize').hover(
        function () {
            $(this).stop(true, false).animate({
                width: (current_w * 3.15),
                height: (current_h * 3.15)
            }, 300);
        }, function () {
            $(this).stop(true, false).animate({
                width: current_w + 'px',
                height: current_h + 'px'
            }, 300);
        });
        }); // note that the additional line ends here
</script>
</head>
<body>
<div class="box">
    <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250"/>
</div>
</body>
</html>

另请参阅 $（document）.ready

上的Jquery文档

Answer 5

更改此

img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250"

到

img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250" height="250"

我认为这可以解决您的问题。

由于

Html上的图像大小调整问题

5 个答案: