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 に答える