0

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

4

3 回答 3

1

您可以尝试Zoomer 画廊插件，或根据本教程自行制作。就我个人而言，我会选择教程路线，因为它可以让你更好地控制结果（你会学到一些东西来引导；）

于 2010-08-15T23:10:40.523 回答
1

如果你只想要一张图片，你可以使用 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 效果

于 2010-08-15T23:25:00.500 回答
0

有一个 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>
于 2012-04-27T09:03:17.630 回答