js实现移动端导航的自动滑动效果

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

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

导航可以滑动和权利，可以点击一个边自动滚动取决于iscroll可视范围{一}。JS。

废话不多说直接的代码：

*
*移动端模拟导航可以点击自动滑动0.1.4
*日期：2017-01-11
*：Xiewei
*导航可滑动的权利和权利，可以点击一个边自动滚动取决于iscroll可视范围{一}。JS
* /
（函数（$）{）
美元。fn.navbarscroll =功能（选项）{
各种属性和参数
无功_defaults = { {
类名：'cur，班/ /选中单击元素名称
clickscrolltime：300 / /点击滑动时间
duibiscreenwidth：0.4，单位是受 / / REM，默认是0.4rem
ScrollerWidth：3，单位是受 / /像素，默认为3，仅用于特殊情况：外部宽度由于不准确的信息所造成的小数点}
defaultselect：0，选择N / /初始默认零
FingerClick：0 / /目标零或1选项必须触发，每个相同的长度，可在
endclickscroll：功能（thisobj）{} / /回调函数
}
无功_opt =美元。延长（_defaults，选项）；
this.each（函数（）{（）
插件代码
_wrapper = $（this）功；
无功_win = $（窗口）；
无功_win_width = _win.width（），_wrapper_width = _wrapper.width（），_wrapper_off_left = _wrapper.offset（左）；
无功_wrapper_off_right = _win_width - _wrapper_off_left - _wrapper_width；
无功_obj_scroller = _wrapper.children（'滚动'）；
无功_obj_ul = _obj_scroller.children（'ul）；
无功_obj_li = _obj_ul.children（李的）；
无功_scroller_w = 0；
_obj_li.css（{多余：0
对于（var i = 0；i < _obj_li.length；i++）{
_scroller_w = _obj_li{i}.offsetWidth;
}
_obj_scroller.width（_scroller_w + _opt。scrollerwidth）；
无功myscroll =新iscroll（' # + _wrapper.attr（'id'），{
EventPassthrough：真的，
ScrollX：真的，
scrolly：假，
PreventDefault：假
}）；
_init（_obj_li.eq（_opt。defaultselect））；
_obj_li.click（函数（）{（）
_init（$（this））；
}）；
解决电脑 / /谷歌浏览器模拟屏手机卡顿的现象令人费解，禁止违约事件的幻灯片（2017-01-11）
_wrapper { 0 }。addEventListener（'touchmove功能（e）{ e.preventDefault（）；}，假）；
功能_init（thiobj）{
VaR this_obj = thiobj美元；
Var duibi=_opt.duibiScreenWidth*_win_width/10 this_index=$this_obj.index (this_off_left=$this_obj.offset), (.Left), this_pos_left=$this_obj.position (.Left), this_width=$this_obj.width (), this_prev_width=$this_obj.prev ('li') (.Width), this_next_width=$this_obj.next ('li') (.Width);
无功this_off_right = _win_width-this_off_left-this_width；
如果（_scroller_w + 2 > _wrapper_width）{
如果（_opt。fingerclick = = 1）{
如果（this_index = = 1）{
MyScroll.scrollTo（- this_pos_left + this_prev_width，0，_opt。clickscrolltime）；
} else if（this_index = = 0）{
MyScroll.scrollTo（- this_pos_left，0，_opt。clickscrolltime）；
} else if（this_index = = _obj_li。长度为2）{
MyScroll.scrollBy（this_off_right - _wrapper_off_right-this_width，0，_opt。clickscrolltime）；
} else if（this_index = = _obj_li。length-1）{
MyScroll.scrollBy（this_off_right - _wrapper_off_right，0，_opt。clickscrolltime）；
其他{ }
如果（this_off_left - _wrapper_off_left -（this_width * _opt。fingerclick）<对比）{
MyScroll.scrollTo（- this_pos_left + this_prev_width +（this_width * _opt。fingerclick），0，_opt。clickscrolltime）；
} else if（this_off_right - _wrapper_off_right -（this_width * _opt。fingerclick）<对比）{
MyScroll.scrollBy（this_off_right-this_next_width - _wrapper_off_right -（this_width * _opt。fingerclick），0，_opt。clickscrolltime）；
}
}
其他{ }
如果（this_index = = 1）{
MyScroll.scrollTo（- this_pos_left + this_prev_width，0，_opt。clickscrolltime）；
} else if（this_index = = _obj_li。length-1）{
如果（this_off_right - _wrapper_off_right > 1 | | this_off_right - _wrapper_off_right < 1）{
MyScroll.scrollBy（this_off_right - _wrapper_off_right，0，_opt。clickscrolltime）；
}
其他{ }
如果（this_off_left - _wrapper_off_left <对比）{
MyScroll.scrollTo（- this_pos_left + this_prev_width，0，_opt。clickscrolltime）；
} else if（this_off_right - _wrapper_off_right <对比）{
MyScroll.scrollBy（this_off_right-this_next_width - _wrapper_off_right，0，_opt。clickscrolltime）；
}
}
}
}
this_obj.addclass美元（_opt。类名），兄弟姐妹（李的）。RemoveClass（_opt。类名）；
_opt.endclickscroll.call（这this_obj美元）；
}
}）；
}；
}（jQuery）；

截图:

提供演示地址：

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。