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 相关文章推荐
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
javascript cookie的简单应用
Feb 24 Javascript
精通JavaScript的this关键字
May 28 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 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
大家须知简单的php性能优化注意点
2016/01/04 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
详解Python3的TFTP文件传输
2018/06/26 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
应届医学毕业生求职信分享
2013/12/02 职场文书
新员工入职感言
2014/02/01 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
妇联主席先进事迹
2014/05/18 职场文书
火箭队口号
2014/06/18 职场文书
督导岗位职责
2015/02/04 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
python urllib库的使用详解
2021/04/13 Python
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏