jQuery气泡效果（背景图+animate动画实现）

2014-10-29 16:08:17 访问(2157) 赞(0) 踩(0)

1、定义CSS样式：

<style type="text/css">
        body
        {
            margin: 10px auto;
            width: 570px;
            font: 75%/120% Arial, Helvetica, sans-serif;
        }
        .menu
        {
            margin: 100px 0 0;
            padding: 0;
            list-style: none;
        }
        .menu li
        {
            padding: 0;
            margin: 0 2px;
            float: left;
            position: relative;
            text-align: center;
        }
        .menu a
        {
            padding: 14px 10px;
            display: block;
            color: #000000;
            width: 144px;
            text-decoration: none;
            font-weight: bold;
            background: url('button.gif') no-repeat center center;
        }
        .menu li em
        {
            background: url('hover.png') no-repeat;
            width: 180px;
            height: 45px;
            position: absolute;
            top: -85px;
            left: -15px;
            text-align: center;
            padding: 20px 12px 10px;
            font-style: normal;
            z-index: 2;
            display: none;
        }
        a.DefaultHref
        {
            color: #0000FF;
            text-decoration: none;
        }
        a.DefaultHref:link
        {
            color: #0000FF;
            text-decoration: none;
        }
        a.DefaultHref:hover
        {
            color: #0000FF;
            text-decoration: underline;
        }
        a.DefaultHref:visited
        {
            color: #0000FF;
            text-decoration: none;
        }
    </style>

2、在Html的Body里面编写Html内容：

<ul class="menu">
        <li><a href="http://www.webdesignerwall.com">Web Designer Wall</a> <em>A wall of design
            ideas, web trends, and tutorials</em> </li>
        <li><a href="http://bestwebgallery.com">Best Web Gallery</a> <em>Featuring the best
            CSS and Flash web sites</em> </li>
        <li><a href="http://www.ndesign-studio.com">N.Design Studio</a> <em>Blog and design
            portfolio of WDW designer, Nick La</em> </li>
    </ul>

3、引用jQuery和实现：

<script type="text/javascript" src="/WebSite/JavaScripts/jquery-1.8.3.min.js"></script>

<script type="text/javascript" language="javascript">

    $(document).ready(function() {

        $(".menu li").hover(function() {

            $(this).find("em").animate({ opacity: "show", top: "-75" }, "slow");

        }, function() {

            $(this).find("em").animate({ opacity: "hide", top: "-85" }, "fast");

        });

    });

</script>

源码下载