jquery弹性突出放大菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery弹性突出放大菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery弹性突出放大菜单</title>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.menuitem img').animate({ width: 100 }, 0);
            $('.menuitem').mouseover(function () {
                gridimage = $(this).find('img');
                gridimage.stop().animate({ width: 200 }, 150);
            }).mouseout(function () {
                gridimage.stop().animate({ width: 100 }, 150);
            });
        });
    </script>

    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }

        img {
            border: none;
            -ms-interpolation-mode: bicubic;
        }

        body {
            padding: 10px;
            text-align: center;
            background: #fafafa;
        }

        #wrapper {
            position: absolute;
            left: 20%;
            padding-top: 100px;
            width: 650px;
        }

        #menuwrapper {
            position: relative;
            height: 210px;
        }

        #menu {
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .menuitem {
            position: fixed relative;
            bottom: 0px;
            display: inline-block;
        }
    </style>

</head>

<body>
    <div id="wrapper">
        <img src="elasticthumb.jpg" />
        <div id="menuwrapper">
            <div id="menu">
                <a href="http://www.baidu.com/" class="menuitem"><img src="icons.jpg"></a>
                <a href="http://www.baidu.com/" class="menuitem"><img src="neattext.jpg"></a>
                <a href="http://www.baidu.com/" class="menuitem"><img src="officeal.jpg"></a>
                <a href="http://www.baidu.com/" class="menuitem"><img src="curtain.jpg"></a>
                <a href="http://www.baidu.com/" class="menuitem"><img src="rebrand.jpg"></a>
            </div>
        </div>
    </div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)