自定义导航条效果

所属分类:媒体,导航-滑块和旋转,水平导航

 10640  78  查看评论 (12)
自定义导航条效果 ie兼容10

xq_navbar

简单实现依赖于jQuery自定义快捷的炫酷导航条效果,样式效果完全自定义。^_^

来一起感受它的魅力吧!

1.技术点

两个个鼠标事件:

  • onmouseover:鼠标移到指定对象上时触发;

  • onmouseout:鼠标离开指定时触发;

2.先来看看它的执行效果吧。(请用电脑查看demo演示)

3.迫不及待想试一试了。

< link rel="stylesheet" href="css/xq_navbar.css"/>
< link rel="stylesheet" href="css/xq.css"/>//不采用beat动画 ,可以不引入

然后在body尾部引入 

< script src="js/jquery.min.js" type="text/javascript">
< script src="js/xq_navbar.js" type="text/javascript">
<div class="xq_bag" id="bar5">//可以自定义其大小
    <ul class="xq_navbar">
        <li class="xq_navli"><a href="#">java</a></li>
        <li class="xq_navli"><a href="#">php</a></li>
        <li class="xq_navli"><a href="#">c#</a></li>
        <li class="xq_navli"><a href="#">photoshop</a></li>
        <li class="xq_navli"><a href="#">c++</a></li>
        <li class="xq_navli"><a href="#">html</a></li>
        <li class="xq_navli"><a href="#">javascript</a></li>
    </ul>
</div>

4.那么配置参数都有那些呢?

var defaults = {
   "bgcolor":"#38927a",//导航条颜色
   "type":"line",//定义导航类型 下划线 underline 上划线overline 双划线line 块级背景block 
   "liwidth":"avg",//设置导航项的宽度类型 auto:自动  , avg:评分, 30:指定具体宽度 
   "hcolor":"rgba(255,0,0,0.8)"//指定每一个导航项的颜色。不指定或指定不够默认 #ccc;统一颜色可直接传入颜色值.也可以["blue","rgb(10,100,100)","red","pink","green","rgba(23,234,22,1)","rgb(230,230,230)"]
}

5.怎么启动呢?

页面加载完成后即可调用该插件,传入你想要效果的参数 

$("#bar5").xq_navbar({
    "type": "block",
    "liwidth": "avg",
    "bgcolor": "#000",
    "hcolor": ["blue", "rgb(10,100,100)", "red", "pink", "green", "rgba(23,234,22,1)", "rgb(230,230,230)"]
});


相关插件-滑块和旋转,水平导航

jQuery互相限制边界的多滑块选区

jQuery滑块不重合 选值边界重合,带有初始化滑块位置功能。
  滑块和旋转
 3635  21

jquer横向滚动插件-jInvertScroll

这是一个轻量级的jQuery插件,让您移动水平视差的效果,同时向下滚动, 这是非常容易设置和要求几乎没有配置。
  滑块和旋转
 18183  44

jQuery轮播图点击放大

jQuery轮播图点击放大,即可点击轮播又可点击图片放大图片
  滑块和旋转
 8912  44

弹出图像滑块使用 jQuery & CSS3

我要分享有关如何创建实验弹出图像滑块。此图像滑块是堆栈的一些图像和飞向前面的图像堆栈的所选图像的工作原理。我们将使用 CSS3 过渡,动画和为此动画的变换和帮助我们维护 jQuery 单击事件、 CSS和过渡动画。
  滑块和旋转
 11509  26

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币

    南城北巷凉了海 0
    2017/2/24 17:19:41

    不错,点赞

        本本士0
        2017/3/10 7:51:22

        感谢支持

    回复
    笑着心疼?? 0
    2017/1/11 15:01:32

    为什么我改了背景颜色和字体颜色,鼠标艺术字体和背景都变成白的

        本本士0
        2017/1/14 9:06:21

        可以加我微信  xiaoqiang0672  ,提供代码交流

    回复
    szg 0
    2016/12/1 18:12:13
    请问:当前项怎么设定?
        本本士0
        2017/1/14 9:05:06

        这个你可以自己拓展,添加class。动态添加样式

    回复
    王哥。  0
    2016/10/29 16:10:43
    不能用!调用的jq为什么在<boyd>里面,不是在header后面吗?  怎么套用都不行,是我的dw有问题吗?
        本本士0
        2016/11/7 15:11:57
        如果页面初始化的时候需要这个js文件你就要放在head里面,否则会放在body后面来提高网页的加载速度。如果你的出不来,可以看一下demo
    回复
    じòぴé 0
    2016/10/5 0:10:34
    有用
        本本士0
        2016/10/5 20:10:12
        谢谢支持
    回复
    月执、 0
    2016/9/26 23:09:32
    已下载!
        本本士0
        2017/1/14 12:33:42
        感谢支持
    回复
取消回复