图像对图像的动画Jquery

我有一个水平无序的2个图像列表。目的是使悬停的图像变得更大(使用Jquery)，而不移动相邻的图像。代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <style type="text/css">
            ul#thumbs li {
                display: inline;
                list-style: none;
            }
            a img {
                position: relative;
                -webkit-border-radius: 20px;
                border: 2px solid blue;
            }
            a img:hover {
                -webkit-border-radius: 20px;
                border: 2px solid yellow;
            }
        </style>
    </head>
    <body>
    <ul id="thumbs">
        <li><a href="#"><img src="img/bono.jpg" width="420" height="300" border="none"/></a></li>
        <li><a href="#"><img src="img/abstr.jpg" width="420" height="300" border="none"/></a></li>
    </ul>
        <script>
        $('a img').mouseover(function(){
            $(this).delay(1500).animate({
                width: "630px",
                height: "450px",
            }, 1500 );
            $(this).css("z-index","1000");
            $(this).css("overflow","visible");
            $(this).css("position","absolute");
        });
        $('a img').mouseout(function(){
        $(this).animate({
            width: "420px",
            height: "300px",
        }, 500 );
        });
        </script>
    </body>
</html>

我想你需要的是这样的东西。

相关内容

最新更新

热门标签：