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


Posted in Javascript onJuly 18, 2017

本文实例为大家分享了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, 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)); 
 }); 
 //解决PC端谷歌浏览器模拟的手机屏幕出现莫名的卡顿现象,滑动时禁止默认事件(2017-01-11) 
 _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);

截图:

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

提供demo地址:

更多关于滑动效果的专题,请点击下方链接查看:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
微信小程序实现简单购物车功能
Dec 30 Javascript
JS实现点击Radio动态更新table数据
Jul 18 #Javascript
Angularjs的启动过程分析
Jul 18 #Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 #Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 #jQuery
ES6中的rest参数与扩展运算符详解
Jul 18 #Javascript
ES6学习之变量的两种命名方法示例
Jul 18 #Javascript
vue实现表格增删改查效果的实例代码
Jul 18 #Javascript
You might like
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
Using the TextRange Object
2006/10/14 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
element中的$confirm的使用
2020/04/26 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python2和Python3.6环境解决共存问题
2018/11/09 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
财务人员个人求职信范文
2013/12/04 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
女生抽烟检讨书
2014/10/05 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
色戒观后感
2015/06/12 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL