更新时间：2018/7/18 上午11:14:48
更新说明：添加css样式说明、Javascript使用方法
发布时间：2018-7-15 10:44
一、插件说明
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)
三、使用说明
引入相关文件
1 2 | <script src="js/jquery.SlidingBlock.js" type="text/javascript" charset="utf-8"></script> |
html结构
1 2 3 4 5 6 7 8 9 10 11 12 | <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> |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 三面板布局轮播图
- 下一个特效： jQuery淘宝图片放大镜（原创）