(function($) { $.fn.navbarscroll = function(options) { var _defaults = { className: 'cur', clickScrollTime: 300, duibiScreenWidth: 0.4, scrollerWidth: 3, defaultSelect: 0, fingerClick: 0, endClickScroll: function(thisObj) {} } var _opt = $.extend(_defaults, options); this.each(function() { var _wrapper = $(this); var _win = $(window); var _win_width = _win.width(), _wrapper_width = _wrapper.width(), _wrapper_off_left = _wrapper.offset().left; var _wrapper_off_right = _win_width - _wrapper_off_left - _wrapper_width; var _obj_scroller = _wrapper.children('.scroller'); var _obj_ul = _obj_scroller.children('ul'); var _obj_li = _obj_ul.children('li'); var _scroller_w = 0; _obj_li.css({ "margin-left": "0", "margin-right": "0" }); for (var i = 0; i < _obj_li.length; i++) { _scroller_w += _obj_li[i].offsetWidth; } _obj_scroller.width(_scroller_w + _opt.scrollerWidth); var myScroll = new IScroll('#' + _wrapper.attr('id'), { eventPassthrough: true, scrollX: true, scrollY: false, preventDefault: false }); _init(_obj_li.eq(_opt.defaultSelect)); _obj_li.click(function() { _init($(this)); }); _wrapper[0].addEventListener('touchmove', function(e) { e.preventDefault(); }, false); function _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(); var this_off_right = _win_width - this_off_left - this_width; if (_scroller_w + 2 > _wrapper_width) { if (_opt.fingerClick == 1) { if (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.length - 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); } else { if (this_off_left - _wrapper_off_left - (this_width * _opt.fingerClick) < duibi) { 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) < duibi) { myScroll.scrollBy(this_off_right - this_next_width - _wrapper_off_right - (this_width * _opt.fingerClick), 0, _opt.clickScrollTime); } } } else { if (this_index == 1) { myScroll.scrollTo(-this_pos_left + this_prev_width, 0, _opt.clickScrollTime); } else if (this_index == _obj_li.length - 1) { if (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); } } else { if (this_off_left - _wrapper_off_left < duibi) { myScroll.scrollTo(-this_pos_left + this_prev_width, 0, _opt.clickScrollTime); } else if (this_off_right - _wrapper_off_right < duibi) { myScroll.scrollBy(this_off_right - this_next_width - _wrapper_off_right, 0, _opt.clickScrollTime); } } } } $this_obj.addClass(_opt.className).siblings('li').removeClass(_opt.className); _opt.endClickScroll.call(this, $this_obj); } }); }; })(jQuery);