Question

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

<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”和height'：“+ = 15px将此值传递给focus（）和'width'：” - = 15px“和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（）。这不起作用。

Answer 1

据我所知，从评论中可以看出来。您的电话过于频繁，您需要保留一些原件。首先初始化图像：

$(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
            });
        });
    });
});

HINTS

setTimeout事件再次以this为窗口。所以我们需要关注焦点，因为上面的代码工作正常，没有超时。

NEW UPDATE

我为模糊添加了相同的功能。当你这样做时，你的代码工作正常，但你真的必须检查你的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);
});

Answer 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");
});

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

图像在jquery中调整大小

3 个答案: