Question

只是想知道是否有任何jquery插件，当你的鼠标在图像上时，这个图像的大小会增加，如果你的鼠标不在图像中，它的大小会减小，所有这些都是平滑过渡。谢谢！

Answer 1

您可以尝试Zoomer gallery plugin，或根据this tutorial推送自己的{{3}}。我个人会去教程路线，因为它会让你更好地控制结果（你会学到一些东西来启动;）

Answer 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

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

jquery图像调整大小过渡onMouseOver

3 个答案: