在 jquery 中调整图像大小答案

【问题标题】：image resize in jquery在 jquery 中调整图像大小
【发布时间】：2011-01-24 09:25:14
【问题描述】：

当图像分别在“焦点”和“模糊”事件上放大/缩小时，我有一个应用程序。我已经为此使用了这个功能

<script>

$(document).ready(function () {


  var timer;
  var w="img.width";
  var h="img.height";
      $('button:has(img)').focus(function () {
         var $image = $(this).find('img');

         timer = setTimeout(function() {

                $image.animate({
                    'width': "+=15px",
                    'height': "+=15px"
                }, 500);  
              }, 
              1000);

      });

      $('button:has(img)').blur(function () {

        if (timer !== null) clearTimeout(timer);
        $(this).find('img').animate({
                'width': "-=15px",
                'height': "-=15px"
            }, 0);
      });

</script>

现在我的问题是我可以读取图像大小并将 15px 添加到图像宽度和高度并传递这些值而不是这样做：

`'width': "+=15px" and height': "+=15px 将此值传递给 focus() and 'width': "-=15px" and height': "-=15px to blur() .

我尝试进行以下更改，但没有成功

var w= "image.width"; var h = "image.height"; var updated_w = w+10; var updated_h= h+10;

将 w,h 传递给 blur() 并将 updated_w、updated_h 传递给 focus()。这行不通。

【问题讨论】：

我猜模糊部分不起作用？还是有什么问题？？
你可以随时问$('img').height(); 或者你说的不是这个吗？
@marnix 我确实使用函数 wat 你说现在我的问题是我将如何添加一些值说 x 并将该值写回 image.width/image.height 到更新它的值。代码 sinpate 会很有帮助。

标签： jquery

【解决方案1】：

据我所知，cmets。您的电话打得太频繁了，您需要保留一些原件。先初始化图片然后：

$(document.ready(function()
{
    $('button img').each(function()
    {
        // save the data inside the element with jQuery
        $.data(this, 'orgH', $(this).height());
        $.data(this, 'orgW', $(this).width());
    });

    // i omitted the timeout, but do as you wish
    // just an example of $.data
    $('button:has(img)').focus(function()
    {
        $('img',this).each(function()
        {
            $(this).animate({
            width: $.data(this,'orgW') + 15 + 'px' // where THIS is the image element again
            });
        });
    });
});

提示

setTimeout 事件再次将this 作为窗口。所以我们需要对焦点做一些事情，因为上面的代码在没有超时的情况下运行良好。

新更新

我将相同的功能放在模糊中。当您执行此操作时，您的代码运行良好，但您真的必须检查您的 keyInput 代码，因为它有点错误。 firebug 甚至会给出错误，因为您还没有 TAB 的案例。

var timerFocus;
var timerBlur;
$('button:has(img)').focus(function()
{
    if(timerBlur !== null) clearTimeout(timerBlur);
    timerFocus = setTimeout(function(el)
    {
        $('img',el).each(function()
        {
            $(this).animate({
            width: $.data(this,'orgW') + 15 + 'px', // where THIS is the image element again
            height : $.data(this,'orgH') + 15 + 'px'
            });
        });
    },500,this); // THIS is the button element
});

$('button:has(img)').blur(function ()
{
    if (timerFocus !== null) clearTimeout(timerFocus);
    timerBlur = setTimeout(function(el)
    {
        $('img',el).each(function()
        {
            $(this).animate({
                width: $.data(this,'orgW')-15+'px', // WATCH THIS COMMA!
                height: $.data(this,'orgH')-15+'px'
            });
        });
    },500,this);
});

【讨论】：

希望您能帮我解决这个问题。
@marnix 你能给我一些建议吗？我被卡住了
@rashmi：我正在努力。我已经可以告诉您的是，由于您的 setTimeout 功能，您失去了 THIS 焦点。 THIS 大概又是一个窗口。没有超时它工作正常。
@marnix，很抱歉打扰您。有没有其他选择。我无法从我的应用程序中删除计时器，因为它是我的应用程序的重要组成部分。 :(
@rashmi，计时器很好用，但你必须将你的元素作为参数。 jsFiddle 现在很讨厌我，所以我停止了它，但是您想要的非常有可能。有关一些额外提示，请参阅编辑后的答案。

【解决方案2】：

你可以试试这个，但是你会失去缩放效果。

$('button:has(img)').blur(function () {

        if (timer !== null) clearTimeout(timer);
        var image = $(this).find('img');
        var new_width = image.width() - 15;
        var new_height = image.height() - 15;
        image.css('width', new_width+"px");
        image.css('height', new_height+"px");
});

【讨论】：

我希望 zoomin/zoomout 都能正常工作，因为这是我的应用程序非常需要的

【解决方案3】：

你有语法错误，我试了一下，对我来说很好用：

您错过了以下内容： });

最终代码在这里：


<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var timer;
        var w="img.width";
        var h="img.height";
        $('button:has(img)').focus(function () {
            var $image = $(this).find('img');

            timer = setTimeout(function() {

                $image.animate({
                    'width': "+=15px",
                    'height': "+=15px"
                }, 500);
            },
            1000);

        });

        $('button:has(img)').blur(function () {

            if (timer !== null) clearTimeout(timer);
            $(this).find('img').animate({
                'width': "-=15px",
                'height': "-=15px"
            }, 0);
        });
    });
</script>

【讨论】：