Question

我有应用程序，其中图像变焦和缩小焦点和模糊。现在的问题是我把焦点放在行的第一个单元格（行由4个单元格组成）并将焦点移动到行的最后一个单元格（使用箭头键）第一个和最后一个单元格之间的2个单元格变小。如果我在几次迭代后做同样的事情，那么第一个和最后一个单元格之间的2个图像就会消失。

因为在我的应用程序中，每个图像都有不同的大小，我不能直接传递值。

可以读取每个图像大小并将包含图像大小的变量传递给模糊函数，而不是执行++ 15px / - = 15px。

代码片段/演示将非常有用。

这是我的演示。看看请帮忙。demo

Answer 1

你可以，例如使用jQuery的data()方法存储图像的原始大小，并在focus和blur事件处理程序中使用它。像这样：

// cache size
$('button img').each(function(i, img) {
    $(img).data('size', {
        'width': $(img).width(),
        'height': $(img).height(),
    });
});

// on focus
$('button:has(img)').focus(function() {
    var $image = $(this).find('img'),
        size = $image.data('size');
    $image.stop().animate({
        'width': (size.width + 15) +'px',
        'height': (size.height + 15) +'px',
    }, 500);
});

// on blur
$('button:has(img)').blur(function() {
    var $image = $(this).find('img'),
        size = $image.data('size'); 
    $image.stop().animate({
        'width': size.width +'px',
        'height': size.height +'px',
    }, 1);
});

这是your demo edited，我想它应该像这样工作，对吧？我已经删除了超时并使用了stop()，因为这是您希望通过超时实现的目标？

jquery中图像zoomin /缩小效果的问题

1 个答案: