Я видел некоторые анимации jQuery для увеличения / сжатия, как это сделать? - PullRequest
Новая
       33

Я видел некоторые анимации jQuery для увеличения / сжатия, как это сделать?

0 голосов
/ 01 марта 2012

Я видел некоторые сайты, которые используют jQuery Animate для увеличения своих изображений при наведении на них и уменьшения их до первоначального размера при наведении. Я пытаюсь сделать это на некоторых изображениях, но я не совсем понимаю это правильно. Размеры изображения 60 на 60 пикселей. Я пошел дальше и удалил код с плавающими попытками и представил исходный код для помощи: HTML: 

<div id="icons">
    <ul>
        <li><a href="services.php"><img src="img/asdf.jpg" alt="" /></a></li>
        <li><a href="services.php"><img src="img/wasd.jpg" alt="" /></a></li>
        <li><a href="services.php"><img src="img/dsdf.jpg" alt="" /></a></li>
        <li><a href="services.php"><img src="img/wafds.jpg" alt="" /></a></li>
    </ul>
</div>

CSS: 

#icons {
margin: 0 auto;
padding-top: 20px;
width: 560px;
}

#icons ul li {
display: inline;
list-style-type: none;
padding-right: 65px;
}

Ответы [ 3 ]

1 голос
/ 01 марта 2012

Если я правильно понимаю, вы берете увеличение дюйма. Ну, концепция этого эффекта заключается в position: absolute изображении в position: relative, overflow: hidden и фиксированном width контейнере,Затем на hover() вы анимируете height и width изображения одновременно с анимацией его свойств left и top с помощью отрицательной половины значений позиции.

0 голосов
/ 01 марта 2012

Очевидно, вы захотите настроить все значения высоты, ширины, верхнего и левого углов, но это должно сделать то, что вы ищете ... 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Grow Shrink Demo</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <style>
            #icons {
                margin: 0 auto;
                padding-top: 20px;
                width: 560px;
            }

            #icons ul {
                display: block;
                height: 45px;
                width: 560px;
                overflow: hidden;
                position: relative;
            }

            #icons ul li {
                display: inline-block;
                list-style-type: none;
                width: 40px;
                height: 40px;
                overflow: hidden;
                position: absolute;
                top: 0px;
            }

            #icons img {
                height: 20px;
                width: 20px;
                position: relative;
                top: 10px;
                left: 10px;
            }
        </style>

        <script type="text/javascript">
            $(document).ready(function(){
                $('#icons img').hover(function(){
                    //handle mouse over
                    $(this).stop();

                    $(this).animate({
                        width: '26px',
                        height: '26px',
                        top: '7px',
                        left: '7px'
                    }, 200);
                }, function(){
                    //handle mouse out
                    $(this).stop();

                    $(this).animate({
                        width: '20px',
                        height: '20px',
                        top: '10px',
                        left: '10px'
                    }, 200);
                });
            });
        </script>
    </head>
    <body>

        <div id="icons">
            <ul>
                <li style="left: 20px;"><a href="services.php"><img src="/images/asdf.jpg" alt="" /></a></li>
                <li style="left: 80px;"><a href="services.php"><img src="img/wasd.jpg" alt="" /></a></li>
                <li style="left: 140px;"><a href="services.php"><img src="img/dsdf.jpg" alt="" /></a></li>
                <li style="left: 200px;"><a href="services.php"><img src="img/wafds.jpg" alt="" /></a></li>
            </ul>
        </div>

    </body>
</html>
0 голосов
/ 01 марта 2012

здесь, я создал скрипку для вас, чтобы помочь вам начать: http://jsfiddle.net/5twM6/4/

вот документация: http://api.jquery.com/animate/

edit: близко к полному решению 

function grow(elem)
{
   elem.animate({"width" : "+=10", "height":"+=10"}, 1000);
}
function shrink(elem)
{
   elem.animate({"width" : "-=10", "height":"-=10"}, 1000);
}
$('.icons ul li img').mouseenter(function(){
   grow($(this));
}).mouseleave(function(){
   shrink($(this));
});

Я еще не проверял это, но это должно помочь вам прогрессировать ...

...