jQuery创建顺滑生动的菜单

所属分类：导航-水平导航

41908 349 查看评论 (3)

分享到微信朋友圈

查看演示立即下载

插件描述：曾经见过一些优秀的jQuery导航，你有想自己创建一个的冲动么？这篇教程是教你怎样建立拥有顺畅动画效果的菜单。

曾经见过一些优秀的jQuery导航，你有想自己创建一个的冲动么？这篇教程是教你怎样建立拥有顺畅动画效果的菜单。

1.在head头文件里引入CSS文件

例如：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>

2.在body标签里面将代码粘贴过来

<div class="box">
    <div class="banner">
        <div class="mybox">
            <div class="fPics" id="fPics">
                <a href="" style="opacity:1;z-index:1;">
                    <img src="images/banner_01.jpg"/>
                </a>
                <a href="">
                    <img src="images/banner_02.jpg"/>
                </a>
                <a href="">
                    <img src="images/banner_03.jpg"/>
                </a>
                <a href="">
                    <img src="images/banner_04.jpg"/>
                </a>
                <a href="">
                    <img src="images/banner_05.jpg"/>
                </a>
            </div>
            <ul class="fBtns" id="fBtns">
                <li class="rli1">
                    <span style="width:4px"></span>
                    <a href="#"></a>
                </li>
                <li class="rli2">
                    <span style="width:4px"></span>
                    <a href="#"></a>
                </li>
                <li class="rli3">
                    <span style="width:4px"></span>
                    <a href="#"></a>
                </li>
                <li class="rli4">
                    <span style="width:4px"></span>
                    <a href="#"></a>
                </li>
                <li class="rli5">
                    <span style="width:4px"></span>
                    <a href="#"></a>
                </li>
            </ul>
        </div>
    </div>
</div>
<script>
    new Bmove("#fBtns","#fPics");
</script>