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

jQuery水平方向菜单导航条 滑块伴随鼠标移动

栏目分类:导航菜单   模板编号:JQ00103    发布日期:2018-07-15   来源:www.zybox.cc   浏览次数:次     在线预览
jquery.SlidingBlock.js是一款基于jQuery的滑块伴随鼠标移动的水平方向菜单导航条插件,可以根据喜好进行个性化的UI定制。 兼容性:支持Chrome、Safari、Firefox、IE8+ 等主流浏览器。

一、插件说明

jquery.SlidingBlock.js是一款基于jQuery的滑块伴随鼠标移动的水平方向菜单/导航条插件,可以根据喜好进行个性化的UI定制

使用jQuery 1.7以上版本

兼容性:支持Chrome、Safari、Firefox、IE8+ 等主流浏览器

PC端使用

鼠标在菜单项中快速划过,默认会有300ms延迟触发滑块滑动

参数说明

二、默认参数说明

  • event_type:'mouseenter' (默认触发滑动块事件)

  • cur_idx: 0 (当前导航项的index 值)

  • cur_class:'current' (当前导航项的class)

  • slider_tm: 400 (滑块滑动时间)

  • delay_tm: 300 (鼠标在元素上快速移入移出的时候不触发元素的滑块滑动,而当鼠标移入元素,并停留超过300毫秒,便触发滑块滑动)

  • slider_h: '4px' (滑块高度 需要写单位)

  • slider_btm: 0 (滑块bottom 定位 需要写单位)

  • slider_class:'sliding-block' (滑块的通用class)

  • before_show:true (滑块展示在前)

  • cur_show:false (滑块滑动过程中,当前导航项下有固定滑块)

  • ele_inner:'ul' (默认导航结构 ul>li>a)

  • ele_child:'li' (默认导航结构 ul>li>a)

三、使用说明

引入相关文件

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.SlidingBlock.js" type="text/javascript" charset="utf-8"></script>

html结构

<div>
    <div id="nav_0">
        <ul>
            <li><a href="javascript:;">哈哈</a></li>
            <li><a href="javascript:;">哈哈哈</a></li>
            <li><a href="javascript:;">嘿嘿嘿嘿</a></li>
            <li><a href="javascript:;">啦啦啦啦</a></li>
            <li><a href="javascript:;">吼吼吼</a></li>
            <li><a href="javascript:;">呵呵</a></li>
        </ul>
    </div>
</div>


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