Масштабирование блоков JQuery / Javascript - PullRequest
Новая
       28

Масштабирование блоков JQuery / Javascript

1 голос
/ 20 апреля 2010

У меня есть какой-то блок div. Мне нужно масштабировать его собственный размер. Как и в панели док-станции MacOS, когда значок находится. Могу ли я сделать это?

Ответы [ 3 ]

5 голосов
/ 20 апреля 2010

да, вы можете:

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 */
                    })
})

здесь вы можете найти хороший пример OSX-подобной док-станции, созданной с помощью jQuery: http://www.ndesign -studio.com / блог / KSS-док-меню

1 голос
/ 20 апреля 2010

Может как то так? 

$("#myDiv").hover(
    function(){
        $(this).css({height : scaled_height, width : scaled_width});
    }, 
    function(){
        $(this).css({height : original_height, width : original_width});
    }
);
0 голосов
/ 22 августа 2012

Я получил это решение от 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 остается такой, какой она есть, и это тот эффект, который мне бы очень хотелось.

...