0

jQuery Animate を使用して、マウス オーバーすると画像が拡大し、マウス アウトすると元のサイズに縮小するサイトを見てきました。いくつかの画像でこれを実行しようとしていますが、うまくいきません。画像のサイズは 60px x 60px です。私は先に進み、試行錯誤のコードを削除し、支援のために最初のコードを提示しました: 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;
}
4

3 に答える 3

1

私が正しく理解していれば、あなたはズームインについて取っています。まあ、この効果の背後にある概念は、固定コンテナposition: absolute内の画像に対するものです。次に、 で、イメージのとをアニメートすると同時に、位置の値の 負の半分でとプロパティをアニメートします。position: relativeoverflow: hiddenwidthhover()heightwidthlefttop

于 2012-02-29T21:54:31.497 に答える
0

ここで、始めるのに役立つフィドルを作成しました：http://jsfiddle.net/5twM6/4/

ここにドキュメントがあります：http://api.jquery.com/animate/

編集：完全なソリューションに近い

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));
});

私はそれをテストしていませんが、それはあなたが進歩するのに役立つはずです...

于 2012-02-29T21:58:05.497 に答える
0

明らかに、すべての高さ、幅、上、左の値を調整したいでしょうが、これはあなたが探していることをするはずです...

<!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>
于 2012-02-29T22:07:52.070 に答える