1

我有一些 div 块。我需要缩放它自己的大小。就像在 MacOS 停靠面板中一样，当图标悬停时。我可以这样做吗？

4

3 回答 3

5

是的你可以：

html:

<div class="scaleMe">&nbsp</div>

jQuery：

$(function(){ /* makes sure your dom is ready */
   $('div.scaleMe').hover(function(){
                       $(this).stop(false, true).animate({width:'50px', height:'50px'}, 1000) /* makes the div big on hover, and .stop() makes sure the annimation is not looping*/
                    },function(){
                       $(this).stop(false, true).animate({width:'20px', height:'20px'}, 600) /* goes back to normal state */
                    })
})

在这里，您可以找到一个使用 jQuery 制作的类似 OSX 的码头的好例子： http ://www.ndesign-studio.com/blog/css-dock-menu

于 2010-04-20T13:18:42.563 回答
1

也许是这样的？

$("#myDiv").hover(
    function(){
        $(this).css({height : scaled_height, width : scaled_width});
    }, 
    function(){
        $(this).css({height : original_height, width : original_width});
    }
);
于 2010-04-20T13:13:24.060 回答
0

我从http://jsbin.com/ecuzof/1/edit/得到了这个解决方案。感谢作者继续前进！我从http://forum.jquery.com/topic/i-want-to-resize-or-scale-the-div-on-hover找到了链接。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>Zoom DIV on Hover</title>
        <link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
        <style>
            body{
                font-size:162.5%;
            }
        </style>
        <style>
            .sectionToZoomOnHover {
                display: table-cell;
                text-align: center;
                vertical-align: middle;
                width: 200px;
                height: 50px;
                margin: 1em;
                padding: 1.2em;
                border: 1px solid gray;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="sectionToZoomOnHover">
            Hover me. I'll grow
        </div>

        <script>
            $(".sectionToZoomOnHover").hover(
                function() {
                    $(this).stop().animate(
                        {
                            width: 360,
                            height: 100,
                            backgroundColor: "lightBlue",
                            fontSize: "3em"
                        }
                    );
                }, function() {
                    $(this).stop().animate(
                        {
                            width: 200,
                            height: 50,
                            backgroundColor: "yellow",
                            fontSize: "1em"
                        }
                    );
                }
            );
        </script>
    </body>
</html>

不幸的是，我还没有弄清楚如何缩放，所以 DIV 的中心点保持原样，这也是我真正想要的效果。

于 2012-08-22T01:41:07.487 回答