html5 手机导航栏左右滑动效果,js实现移动端导航点击自动滑动效果

本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码，供大家参考，具体内容如下

移动端模拟导航可点击自动滑动 0.1.4。

导航可左右滑动，可点击边缘的一个，自动滚动下一个到可视范围【依赖于iscroll.js】。

废话不多说直接上代码：

/*

* 移动端模拟导航可点击自动滑动 0.1.4

* Date: 2017-01-11

* by: xiewei

* 导航可左右滑动，可点击边缘的一个，自动滚动下一个到可视范围【依赖于iscroll.js】

*/

(function ($) {

$.fn.navbarscroll = function (options) {

//各种属性、参数

var _defaults = {

className:'cur', //当前选中点击元素的class类名

clickScrollTime:300, //点击后滑动时间

duibiScreenWidth:0.4, //单位以rem为准，默认为0.4rem

scrollerWidth:3, //单位以px为准，默认为3,[仅用于特殊情况：外层宽度因为小数点造成的不精准情况]

defaultSelect:0, //初始选中第n个，默认第0个

fingerClick:0, //目标第0或1个选项触发,必须每一项长度一致，方可用此项

endClickScroll:function(thisObj){}//回调函数

}

var _opt = $.extend(_defaults,