当前位置:主页 > jquery插件 > 导航菜单 >

jQuery创建顺滑生动的菜单

栏目分类:导航菜单   模板编号:JQ00019    发布日期:2017-03-21   来源:网络   浏览次数:次     在线预览
曾经见过一些优秀的jQuery导航,你有想自己创建一个的冲动么? 这篇教程是教你怎样建立拥有顺畅动画效果的菜单。

使用步骤

1、引入以下的js和css文件

<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>


在线演示 立即下载
打赏本站
云盘密码:p4yx

标签: jquery 菜单 下滑

Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
轮播图 滚动代码 表单按钮 音频视频 客服代码 弹出提示 TAB选项卡 导航菜单 页面布局 图片展示 UI
织梦标签工具下载 ↑↓
织梦标签工具下载