Question

我想在使用resizable（）函数时显示在jquery中连续使用鼠标调整大小的图像的宽度和高度。请不要建议任何插件。在此先感谢。

Answer 1

resize事件处理程序的第二个参数，通常称为ui对象，包含originalSize和size属性。

＆＃13;

$("#resizable").resizable({
  resize: function(e, ui) {
    console.log(ui.size);
    $('#width').text(ui.size.width);
    $('#height').text(ui.size.height);
  }
});

＆＃13;

#resizable {
  width: 100px;
  height: 100px;
  background: #ccc;
}
</style>

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="resizable"></div>
<div>
  <p>width:<span id='width'>100</span> height:<span id='height'>100</span>
  </p>
</div>

＆＃13;

Answer 2

以下是jquery resizable的工作示例

                            <html>
                                <head>
                                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                                    <link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
                                    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
                                    <style>
                                        .imageresizable {
                                          width: 150px;
                                          height: 150px;
                                          background: #586DB4;
                                        }
                                    </style>
                                </head>
                                <body>
                                    <div class="imageresizable"></div>
                                    <div>
                                      <p>width:<span id='curwidth'>150</span> height:<span id='curheight'>150</span>
                                      </p>
                                    </div>
                                    <script>
                                        $( ".imageresizable" ).resizable({
                                            stop: function(event, ui) {
                                                var curwidth = ui.size.width;
                                                var curheight = ui.size.height;
                                                $('#curwidth').text(curwidth);
                                                $('#curheight').text(curheight);
                                            }
                                        });
                                    </script>
                                </body>
                            </html>

如何在使用jquery resizable（）函数时获取图像的宽度和高度？

2 个答案: