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, 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);

截图:

提供demo地址:

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

时间: 2017-07-16

JavaScript实现滑动导航栏效果

本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.

javascript实现的又一个不错的滑动导航效果

导航,鼠标放上去看看效果 ::你会做,我也要会:: function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all)

jQuery实现的滑块滑动导航效果示例

本文实例讲述了jQuery实现的滑块滑动导航效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net jquery滑动导航</title> <style> *{margin: 0;padding: 0;box-sizing: border

JS实现滑动导航效果

本文实例为大家分享了JS实现滑动导航效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max

一个不错的渐隐文字效果第1/2页

我想实现一个,点一下按钮,text里面的文字渐渐消失,换成别的文字后,又渐渐出现的功能. 主要是这个函数 function chgtext() {         hidetext();         ide++;         document.all.title.value=ide;         showtext(); } 点一下执行一次这个函数,可是实现不了,请大家帮忙改一下,谢谢 无标题文档 var col=153; function hidetext() { document.

推荐一个不错的图片浏览效果

受那位WPSXXX的 IMG大于DIV 的启发 写的  有不足之处 如果有什么好的修改或建议 希望能给我一份copy 谢谢 sjx.saxon@gmail.com Map Image * {margin:0px auto;padding:0px;text-align:center;} * {font-size:9pt;font-family:Arial;} body {margin-top:20px;} body{-moz-user-select: none;-khtml-user-select

一个不错的动感导航菜单

<style> dl{width:150px;background:#00f url(bottom.gif) no-repeat left bottom;color:#fff;padding-bottom:5px;} dt{background:#00f url(top.gif) no-repeat top left;padding:10px 10px 10px 20px;font:14px/1.5em arial;border-bottom:1px solid #fff;} dd{margi

JS仿淘宝实现的简单滑动门效果代码

本文实例讲述了JS仿淘宝实现的简单滑动门效果代码.分享给大家供大家参考.具体如下: 这是一个简单的仿淘宝滑动门效果代码,个人感觉真的挺不错,以前有过一款和这个差不多.在滑动门里你可以再次布局你的网页,可以做成一个功能超强大的导航,原示例是一个拼音索引程序,改成菜单也是可以的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-simple-hdm-style-demo/ 具体代码如下: <!DOCTYPE html PUBL

基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)

内容滑动切换应用非常广,常见的有幻灯片焦点图.画廊切换等.随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程. 先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示: 效果展示      源码下载 本次教程分三个部分: 1.使用jQuery开发基本的内容滑动切换效果, 2.支持移动端触控自适应的内容滑动切换效果, 3.封装内容滑动切换效果jQuery插件. 本文讲解第一部分,

js实现百度联盟中一款不错的图片切换效果完整实例

本文实例讲述了js实现百度联盟中一款不错的图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现百度联盟中的一个不错的图片切换效果</title> <body> <script> var links = new Array(); links[1] = "http://www.baidu.com/"; links[2] = "http://www.jb5

Android仿微信5实现滑动导航条

本文实例为大家分享了Android 仿微信5滑动导航效果,供大家参考,具体内容如下 ViewPageAdapter.java package com.rong; import java.util.ArrayList; import java.util.List; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; publi