jQuery图像调整大小转换onMouseOver答案

【问题标题】：jquery image resize transition onMouseOverjQuery图像调整大小转换onMouseOver
【发布时间】：2011-03-30 05:03:03
【问题描述】：

只是想知道是否有任何 jquery 插件，当您的鼠标悬停在图像上时，该图像的大小会增加，如果您的鼠标不在图像上，它的大小会减小，这一切都是平滑过渡。谢谢！

【问题讨论】：

试试这个justinfarmer.com/?p=14，这里有一个演示justinfarmer.com/tutorials/imageexpansion/imageexpansion.html。我认为这正是您所需要的。

标签： jquery css image css-transitions

【解决方案1】：

您可以尝试Zoomer gallery plugin，或根据this tutorial 自行开发。就我个人而言，我会选择教程路线，因为它可以让你更好地控制结果（你会学到一些东西来启动；）

【讨论】：

【解决方案2】：

如果您只想要一张图片，您可以使用 jQuery 的 UI 效果。请注意，这与基本 jQuery 是分开的 - 将其添加到您的 jQuery 调用下方。

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

现在您已经添加了一个指向 UI 的链接，我们可以像这样使用它的效果库：

脚本：

$(document).ready(function() {
    $('#imgid').hover(function(){$(this).effect("scale",{percent:200},500)}, function(){$(this).effect("scale",{percent:50},500)})
});

html:

<img id="imgid" src="path/to/img.png" alt="(Vacation Slide)">

请记住，当您扩大规模时，您需要弄清楚如何缩小规模，因为新的规模将是 100%。在我的代码中，我们将其翻倍（200%），然后将其减少一半（50%）以恢复原始状态。随意使用过渡时间，以及您可能需要使其完美的任何回调。

链接到jQuery .hover() 和jQuery UI effects

【讨论】：

【解决方案3】：

有一个 jQuery hack：

$(document).ready(function() {
    $('#target_selector').mouseover(function(){
        $(this).css('height':'value', 'width':'value')
        $(this).mouseout(function(){
            $('this').css('height':'value', 'width':'value')
        });
    });
});

但你可以使用 CSS 伪类，:hover

#target_selector {
    height: value;
    width: value;
}
#target_selector:hover {
    height: value;
    width: value;
}

两者都可以应用于此示例 HTML

<html>

<body>

    <img id="target_selector" />

</body>

</html>

【讨论】：