很好用的移动端左右滑动导航特效

最新推荐文章于 2023-05-20 13:29:15 发布
最新推荐文章于 2023-05-20 13:29:15 发布
阅读量6.9k 收藏 5
点赞数 1
分类专栏： 移动端 


<!DOCTYPE html>
<html data-dpr="1" style="font-size: 41.3px;"><head>
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>页面标题</title>
    <meta name="description" content="页面简述">
    <meta name="keywords" content="关键词">
    <style type="text/css">
        html{color:#000;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
        html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
        body {background:#FFF;color:#4a4f5a;font: 400 14px/1.5 "微软雅黑",Helvetica,STHeiti,Droid Sans Fallback;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
        input,select,textarea{font-size:100%}
        article,aside,footer,header,nav,section,audio,canvas,video,img {display: block;}
        table{border-collapse:collapse;border-spacing:0}
        fieldset,img{border:0}
        abbr,acronym{border:0;font-variant:normal}
        del{text-decoration:line-through}
        address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}
        ol,ul{list-style:none}
        caption,th{text-align:left}
        h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
        q:before,q:after{content:''}
        button{outline:0;border:none;}
        a:hover{text-decoration:none}
        ins,a{text-decoration:none}
        textarea {resize: none;}
        iframe,img {border:0;}
        img{display:block;width:100%;}
        ul,ol {list-style:none;}
        input,select,textarea {outline: 0;-webkit-user-modify: read-write-plaintext-only;}
        input {-webkit-appearance: none;}
        .pr{position:relative;}
        .abs{position: absolute}
        .fl{float:left;display:inline-block;}
        .fr{float:right;display:inline-block;}
        .clearfix:after{content:".";display:block;height:0;clear: both;visibility:hidden;}
        .clearfix{*zoom:1;}
        .wrap{min-width: 320px;max-width:768px;margin:0 auto;overflow:hidden;position:relative;}

        .htit{line-height:1rem;padding:0 .3rem;color:#ff8e2e;font-size: .4rem;margin:1rem 0 .4rem 0}
        .wrapper01 {position:relative;height: 1rem;width: 100%;overflow: hidden;margin:0 auto;border-bottom:1px solid #ccc}
        .wrapper01 .scroller {position:absolute}
        .wrapper01 .scroller li {height: 1rem;color:#333;float: left;line-height: 1rem;font-size: .4rem;text-align: center}
        .wrapper01 .scroller li a{color:#333;display:block;margin:0 .3rem}
        .wrapper01 .scroller li.cur a{color:#1cbb9b;}

        .wrapper02 {position:relative;height: 1rem;width: 100%;overflow: hidden;margin:0 auto;background:#ddd}
        .wrapper02 .scroller {position:absolute}
        .wrapper02 .scroller li {height: 1rem;color:#333;float: left;line-height: 1rem;font-size: .4rem;text-align: center}
        .wrapper02 .scroller li a{color:#333;display:block;margin:0 .3rem}
        .wrapper02 .scroller li.cur{background:#1cbb9b}
        .wrapper02 .scroller li.cur a{color:#fff;}

        .wrapper03 {position:relative;height: 1rem;width: 100%;overflow: hidden;margin:0 auto;border-bottom:1px solid #ccc}
        .wrapper03 .scroller {position:absolute}
        .wrapper03 .scroller li {height: 1rem;color:#333;float: left;line-height: 1rem;font-size: .4rem;text-align: center}
        .wrapper03 .scroller li a{color:#333;display:block;margin:0 .3rem;padding:0 .1rem}
        .wrapper03 .scroller li.cur a{color:#1cbb9b;height:.9rem;border-bottom:.1rem solid #1cbb9b}

        .wrapper04 {position:relative;height: 1rem;width: 80%;overflow: hidden;margin:0 auto;background:#ddd}
        .wrapper04 .scroller {position:absolute}
        .wrapper04 .scroller li {height: 1rem;color:#333;float: left;line-height: 1rem;font-size: .4rem;text-align: center}
        .wrapper04 .scroller li a{color:#333;display:block;margin:0 .3rem}
        .wrapper04 .scroller li.cur{background:#1cbb9b}
        .wrapper04 .scroller li.cur a{color:#fff;}

    </style>
</head>
<body style="font-size: 12px;">
<h2 class="htit">demo示例一</h2>
<div class="wrapper wrapper01" id="retr">
    <div class="scroller">
        <ul class="clearfix">
            <li class="cur"><a href="javascript:void(0)">全部科目</a></li>
            <li><a href="javascript:void(0)">会计从业</a></li>
            <li><a href="javascript:void(0)">会计职称</a></li>
            <li><a href="javascript:void(0)">注会</a></li>
            <li><a href="javascript:void(0)">税务师</a></li>
            <li><a href="javascript:void(0)">国际证书</a></li>
            <li><a href="javascript:void(0)">更多</a></li>
            <li><a href="javascript:void(0)">更多注会</a></li>
            <li><a href="javascript:void(0)">国际证2</a></li>
            <li><a href="javascript:void(0)">更多4</a></li>
            <li><a href="javascript:void(0)">更多5</a></li>
        </ul>
    </div>
</div>

<h2 class="htit">demo示例二</h2>
<div class="wrapper wrapper02" id="wrapper02">
    <div class="scroller">
        <ul class="clearfix">
            <li class="cur"><a href="javascript:void(0)">全部科目</a></li>
            <li><a href="javascript:void(0)">会计从业</a></li>
            <li><a href="javascript:void(0)">会计职称</a></li>
            <li><a href="javascript:void(0)">注会</a></li>
            <li><a href="javascript:void(0)">税务师</a></li>
            <li><a href="javascript:void(0)">国际证书</a></li>
            <li><a href="javascript:void(0)">更多</a></li>
            <li><a href="javascript:void(0)">更多注会</a></li>
            <li><a href="javascript:void(0)">国际证书2</a></li>
            <li><a href="javascript:void(0)">更多4</a></li>
            <li><a href="javascript:void(0)">更多5</a></li>
        </ul>
    </div>
</div>
<h2 class="htit">demo示例三</h2>
<div class="wrapper wrapper03" id="wrapper03">
    <div class="scroller">
        <ul class="clearfix">
            <li class="cur"><a href="javascript:void(0)">全部科目</a></li>
            <li><a href="javascript:void(0)">会计从业</a></li>
            <li><a href="javascript:void(0)">会计职称</a></li>
            <li><a href="javascript:void(0)">注会</a></li>
            <li><a href="javascript:void(0)">税务师</a></li>
            <li><a href="javascript:void(0)">国际证书</a></li>
            <li><a href="javascript:void(0)">更多</a></li>
            <li><a href="javascript:void(0)">更多注会</a></li>
            <li><a href="javascript:void(0)">国际证书2</a></li>
            <li><a href="javascript:void(0)">更多4</a></li>
            <li><a href="javascript:void(0)">更多5</a></li>
        </ul>
    </div>
</div>
<h2 class="htit">demo示例四</h2>
<div class="wrapper wrapper04" id="sass">
    <div class="scroller">
        <ul class="clearfix">
            <li class="cur"><a href="javascript:void(0)">全部科目</a></li>
            <li><a href="javascript:void(0)">会计从业</a></li>
            <li><a href="javascript:void(0)">会计职称</a></li>
            <li><a href="javascript:void(0)">注会</a></li>
            <li><a href="javascript:void(0)">税务师</a></li>
            <li><a href="javascript:void(0)">国际证书</a></li>
            <li><a href="javascript:void(0)">更多</a></li>
            <li><a href="javascript:void(0)">更多注会</a></li>
            <li><a href="javascript:void(0)">国际证书2</a></li>
            <li><a href="javascript:void(0)">更多4</a></li>
            <li><a href="javascript:void(0)">更多5</a></li>
        </ul>
    </div>
</div>

<h2 class="htit">demo示例五</h2>
<div class="wrapper02" id="demo05">
    <div class="scroller">
        <ul class="clearfix">
            <li><a href="javascript:void(0)">全部科目</a></li>
            <li><a href="javascript:void(0)">会计从业</a></li>
            <li><a href="javascript:void(0)">会计职称</a></li>
            <li><a href="javascript:void(0)">注会</a></li>
            <li><a href="javascript:void(0)">税务师</a></li>
            <li><a href="javascript:void(0)">国际证书</a></li>
            <li class="cur"><a href="javascript:void(0)">更多</a></li>
            <li><a href="javascript:void(0)">更多注会</a></li>
            <li><a href="javascript:void(0)">国际证书2</a></li>
            <li><a href="javascript:void(0)">更多4</a></li>
            <li><a href="javascript:void(0)">更多5</a></li>
        </ul>
    </div>
</div>

<h2 class="htit">demo示例六</h2>
<div class="wrapper02" id="demo06">
    <div class="scroller">
        <ul class="clearfix">
            <li><a href="javascript:void(0)">北京</a></li>
            <li><a href="javascript:void(0)">上海</a></li>
            <li><a href="javascript:void(0)">广州</a></li>
            <li class="cur"><a href="javascript:void(0)">深证</a></li>
            <li><a href="javascript:void(0)">杭州</a></li>
            <li><a href="javascript:void(0)">武汉</a></li>
            <li><a href="javascript:void(0)">天津</a></li>
            <li><a href="javascript:void(0)">郑州</a></li>
            <li><a href="javascript:void(0)">海口</a></li>
            <li><a href="javascript:void(0)">郑州</a></li>
            <li><a href="javascript:void(0)">长春</a></li>
            <li><a href="javascript:void(0)">长沙</a></li>
            <li><a href="javascript:void(0)">南京</a></li>
            <li><a href="javascript:void(0)">西安</a></li>
        </ul>
    </div>
</div>

<div style="padding:1rem .4rem;line-height:.6rem;font-size:.34rem">
        参数说明：<br>
        className:'cur', //当前选中点击元素的class类名<br>
        clickScrollTime:300, //点击后滑动时间<br>
        duibiScreenWidth:0.4, //单位以rem为准，默认为0.4rem<br>
        fingerClick:0, //目标第0或1个选项触发,必须每一项长度一致，方可用此项<br>
        endClickScroll:function(thisObj){}//回调函数<br>
</div>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll.min.js"></script>
<script type="text/javascript" src="js/navbarscroll.js"></script>
<script type="text/javascript">
    $(function(){
        //demo示例一到四 通过lass调取，一句可以搞定，用于页面中可能有多个导航的情况
        $('.wrapper').navbarscroll();

        //demo示例五 通过id调取
        $('#demo05').navbarscroll({
            defaultSelect:6,
            endClickScroll:function(obj){
                console.log(obj.text())
            }
        });
        //demo示例六 通过id调取
        $('#demo06').navbarscroll({
            defaultSelect:3,
            scrollerWidth:6,
            fingerClick:1,
            endClickScroll:function(obj){
                console.log(obj.text())
            }
        });
    });
</script>

</body>
</html>

navbarscroll.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);



上拉加载，下拉刷新 导航栏左右滑动 （移动端）
03-25
移动端的上拉加载，下拉刷新，导航栏的左右滑动 常见的功能
移动端左右滑动导航
weixin_30881367的博客
11-06 443
移动端左右滑动导航 移动端项目中，当导航栏目多的时候，需要左右滑动，且隐藏横向滚动条 纯css即可实现此效果 <div class="menu-outer"> <ul class="menu"> <li><a href="javascript:void(0);">15天预报</a></li> ...
移动端 左右滚动（无滚动条）导航栏
weixin_43297321的博客
08-04 3121
拉哥的一种方法 那个人的一种方法
移动端 网易云 左右滚动导航栏
柒柒柒柒
06-16 1061
移动端 网易云 左右滚动导航栏
原生JS实现点击导航栏鼠标左右滑动（适用于PC端和移动端）
bugQueen的博客
12-03 5548
效果图： 点击导航栏左右拖动 代码： CSS： <style> .navBar { width: 1200px; margin-left: 25px; margin-top: 40px; margin-bottom: 40px; overflow-x: auto; white-space: nowrap; }
Zepto.js移动端左右滑动导航菜单.zip
07-04
这种灵活性使得Zepto.js移动端左右滑动导航菜单能够很好地适应多样化的网站设计需求。 总结来说，基于Zepto.js的移动端左右滑动导航菜单项目是对移动网页用户交互体验的一次有益尝试。它利用了现代前端技术，结合...
Zepto.js移动端左右滑动导航菜单特效代码
03-20
"Zepto.js移动端左右滑动导航菜单特效代码"就是利用Zepto.js来实现的一种互动性强、用户体验优良的导航菜单。 这个特效主要适用于iOS和Android系统，由于其基于触摸事件，因此暂不支持Windows Phone（WP）平台。在...
移动端左右滑动导航菜单特效实现
在实际应用中，开发者需要将这些知识点结合起来，才能创造出既实用又美观的手机触屏滑动导航特效。需要注意的是，上述知识点分析基于文件标题和描述提供的信息，没有实际的文件内容，所以只能作为对给定文件内容的一...
手机移动端左侧滑动菜单特效代码
03-20
手机移动端左侧滑动菜单是一种常见的设计模式，它允许用户通过简单的手势或点击按钮来访问隐藏的导航选项。这种设计通常用于节省屏幕空间，使用户界面更加简洁且易于操作。本项目就是基于这种设计理念，利用jQuery和...
jQuery实现swiper移动端滑动式导航特效.zip
11-07
本项目“jQuery实现swiper移动端滑动式导航特效”是针对移动设备优化的一种滑动导航解决方案，利用jQuery的强大功能和灵活性，为用户提供流畅的触摸滑动体验。 Swiper是一个流行的滑动框架，常用于创建高质量的滑动...
移动端触屏滑动导航菜单
09-15
移动端触屏滑动导航菜单
vue 和vue-touch 实现移动端左右导航效果（仿京东移动站导航）
11-27
先给大家展示下效果图，感觉还不错请参考实现代码： 使用技术：vue2.0 webpack vue-touch 一些简单的javascript; （注意:vue-touch 使用的是2.0.0版本 需要与vue2.0.0兼容） vue-touch(地址:https://github.com/vuejs/vue-touch 注意是next 分支) 左侧导航可滑动（右侧视图窗因为和左逻辑一样 就没写） var VueTouch = require('vue-touch') Lib.Vue.use(VueTouch, {name: 'v-touch'}) 通过npm 安装后vuetouch
可以触摸左右滑动的导航菜单
01-07
最近刚研究的一个demo,拿出来与各位共享，也希望各位有好的建议。
js实现移动端导航点击自动滑动效果
10-19
主要为大家详细介绍了js实现移动端导航点击自动滑动效果，导航可左右滑动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
navscroll-js-滚动显示菜单项，并在单击菜单项时滚动到某个部分。 用作vue组件，vue指令或与vanilla js一起使用。-Vue.js开发
05-27
navscroll-js安装该软件包可在npm上获得。 使用npm：npm install --save navscroll使用yarn：yarn add navscroll直接包含它navscroll-js安装该软件包可在npm上获得。 使用npm：npm install --save navscroll使用yarn：yarn add navscroll直接将其包含在html中：
vue移动端导航左右滑动点击跳转
dibuyao2061的博客
09-19 802
　　一、效果 点击跳转+滑动 　　二、注意：我这是Swiper3 　　 三、在app.vue上引入相关组件 　　　　 　　　　1.v-header baiduMap 　　//主要在父组件上显示组件的嵌套 　　　　 2.router-view 　　//是显示路由跳转的组件 　　　四、nav头部header部分 　　　　 　　...
【Android入门到项目实战-- 11.3】—— 实现可左右滑动切换页面的导航栏（ViewPager+TabLayout+Fragment）
最新发布
张修宇的博客
05-20 2422
Android如何实现可左右滑动的导航栏，使用ViewPager+TabLayout+Fragment实现，在导航栏页面里加入左右滑动的导航栏。
移动端怎么实现【nav左右滑动导航】
weixin_50450473的博客
08-13 836
html： <!--导航--> <div class="navs-outer"> <ul class="navs"> <li><a href="#c1">Jquery</a></li> <li><a href="#c2">HTML</a></li> <li>&lt..
移动端导航栏简单滚动效果
qq_28020627的博客
01-20 1725
移动端导航栏简单滚动 user-scalable=no"> *{ margin: 0; padding: 0; } body{ width: 100%; /*overflow-x: hidden;*/ } .wrap{ width: 640px; overflow: hidden; /*overflow-x: hidden;*/ } .wr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值