<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="format-detection" content="telephone=no" />

    <meta name="format-detection" content="email=no" />

    <meta name="keywords" content="xxx" />

    <meta name="description" content="xxx" />

    <title>xxx</title>

    <style>

        /*

         * 2016-10-14

         */

        /*全局*/

        html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#000;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

        body{line-height:1;font-family:Microsoft YaHei,Helvetica,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif}

        article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

        ol,ul{list-style:none}

        blockquote,q{quotes:none}

        blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}

        strong{font-weight:bold}

        table{border-collapse:collapse;border-spacing:0}

        img{border:0}

        a{display:block;text-decoration:none}

        body{background:#fff;position: relative;}

        html,body{width:100%;overflow-x:hidden;}

        @media only screen and (max-width:640px){html,body{font-size:25px}}

        @media only screen and (max-width:540px){html,body{font-size:22.5px}}

        @media only screen and (max-width:480px){html,body{font-size:18.5px}}

        @media only screen and (max-width:400px){html,body{font-size:16.5px}}

        @media only screen and (max-width:360px){html,body{font-size:15px}}

        @media only screen and (max-width:320px){html,body{font-size:14px}}

        @media only screen and (max-width:240px){html,body{font-size:13.5px}}

        /*公共*/

        .hide{display:none}

        .c8420{color: #ff8420;}

        /*私有*/

        /*頂部tab*/

        .tab_box{text-align: center;background: #fff;border-bottom: 1px solid #ebebeb;height: 50px;padding-left: 15px;box-sizing: border-box;}

        .tab_box ul{width: 1000px;}

        .tab_box ul li{color: #333;font-size: 16px;position: relative;float: left;text-align: center;height: 50px;width:110px;line-height: 50px;}

        .tab_box .under{position: absolute;border-bottom: 2px solid #ff8420;width: 80px;bottom: 0;left: 50%;margin-left: -40px;}

        .tab_box .last{margin-right: 0;}

        .tab_box .on{color: #ff8420;}

        /*内容*/

        .container{}

    </style>

</head>

<body>

    <!-- tab start -->

    <div class="tab_box" id="tab_box">

        <ul>

            <li data_name="aaaa">aaaa<span class="under"></span></li>

            <li data_name="bbbb">bbbb<span class="under hide"></span></li>

            <li data_name="cccc">cccc<span class="under hide"></span></li>

            <li data_name="dddd">dddd<span class="under hide"></span></li>

            <li data_name="eeee">eeee<span class="under hide"></span></li>

            <li data_name="ffff" class="last">ffff<span class="under hide"></span></li>

        </ul>

    </div>

    <!-- tab end -->

    <script src="http://valar.huainanhai.com/common/lib/zepto.1.1.3.js" type="text/javascript"></script>

    <script src="http://valar.huainanhai.com/common/lib/iscroll.5.0.js"></script>

    <script>

        // 2016/10/17

        var data_name = _get('data_name')?_get('data_name'):'';

        var myscroll = null;

        _init();

        //初始化

        function _init(){

            //修改nav的宽度

            setTabUlWidth();

            //加载iscoll

            tab_box_load();

            //首次加载

            if(data_name){

                var obj = $('#tab_box ul li[data_name="'+data_name+'"]');

                if(obj.length){

                    changeTab(obj);

                    //让tab滚动到指定tab

                    //将一个jQuery对象转换成DOM对象：[index]和.get(index);

                    var offset_left = obj[0].offsetLeft;

                    myscroll.scrollTo(-offset_left+110,0);

                }else{

                    changeTab($('#tab_box ul li').eq(0));

                }

            }else{

                changeTab($('#tab_box ul li').eq(0));

            }

        }

        // 设置tab ul的宽度

        function setTabUlWidth(){

            var tab_li_width = $('#tab_box li').width();

            var tab_li_num = $('#tab_box li').length;

            $('#tab_box ul').css('width',tab_li_num*tab_li_width+50);

        }

        //tab点击监听

        $('#tab_box ul li').on('click',function(){

            changeTab($(this));

        });

        //切换tab

        function changeTab(obj){

            $('#tab_box ul li').removeClass('on');

            $('#tab_box ul li span').hide();

            obj.addClass('on');

            obj.children('.under').show();

            data_name = obj.attr('data_name');

        }

        //加载iscoll

        function tab_box_load(){

            myscroll = new iScroll("tab_box",{

                snap: false,

                momentum: true,

                vScroll: false,

                hScroll: true,

                hScrollbar: false,

            });

        }

        // 获取get参数

        function _get(name){

            //正则解释

            // ()表示一个子表达式 1.在被修饰匹配次数的时候，括号中的表达式可以作为整体被修饰2.取匹配结果的时候，括号中的表达式匹配到的内容可以被单独得到

            // (^|&) 匹配字符串开头或者&字符

            // ([^&]*) 匹配除了&之外的字符0次或多次 相当于 {0,}

            // (&|$) 匹配字符串结尾或者&字符

            // match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

            var data = window.location.search.substr(1).match(reg);

            return data!=null?decodeURIComponent(data[2]):null;

        }

    </script>

</body>

</html>

　　

iscoll制作顶部可以左右滑动的tab的更多相关文章

  1. 3种方式实现可滑动的Tab

    1. 第一种,使用 TabHost + ViewPager 实现 该方法会有一个Bug,当设置tabHost.setCurrentTab()为0时,ViewPager不显示(准确的说是加载),只有点击 ...

  2. Android实战简易教程-第三十四枪（基于ViewPager和FragmentPagerAdapter实现滑动通用Tab）

    上一段时间写过一篇文章<基于ViewPager实现微信页面切换效果> 里面实现了相似微信Tab的页面.可是这样的实现方法有个问题.就是以后全部的代码逻辑都必须在MainActivity中实 ...

  3. ScrollView滑动到底部或顶部监听，ScrollView滑动到底部或顶部再继续滑动监听；

    ScrollView滑动到底部或顶部后,再继续滑动达到一定距离的监听: ScrollView滑动到底部或顶部的监听: /** * 监听ScrollView滚动到顶部或者底部做相关事件拦截 */ pub ...

  4. jQuery制作顶部与左侧锚点板块定位功能带动画跳转特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. [Android] Android 类似今日头条顶部的TabLayout 滑动标签栏 效果

    APP市场中大多数新闻App都有导航菜单,导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面,今日头条, 网易新闻等. 本文主要讲的是用:T ...

  6. Fragment实现不支持左右滑动的Tab

    主要思想:顶部标题top.xml,中间Fragment,底部Tab导航. top.xml具体实现: <?xml version="1.0" encoding="ut ...

  7. CoordinatorLayout 嵌套 AppBarLayout RecyclerView ，通过代码控制，使得CoordinatorLayout 自动滑动到tab置顶的位置

    有两个方式可以实现 一:调用AppBarLayout,设置间距 val behavior = (appbar_layout.getLayoutParams() as CoordinatorLayout ...

  8. ViewPager+Fragment实现支持左右滑动的Tab

    主要思想:顶部标题栏top.xml,中间ViewPager(4个Fragment),底部导航 top.xml和bottom.xml在我之前的两个随笔里有,此处不再赘述. activity_main.x ...

  9. Android Studio 使用ViewPager + Fragment实现滑动菜单Tab效果 --简易版

    描述: 之前有做过一个记账本APP,拿来练手的,做的很简单,是用Eclipse开发的: 最近想把这个APP重新完善一下,添加了一些新的功能,并选用Android Studio来开发: APP已经完善了 ...

随机推荐

  1. servlet 之 复习

    servlet 他是我们第一个动态资源,servlet和JSP都是. servlet ===> server applet 运行在服务器端的小程序. 1.获得请求 2.处理请求 3.完成响应 s ...

  2. CentOS7 开机调整亮度

    默认亮度是100,受不了,所与就自己想了个办法,依赖其它的自启动服务使我的设置生效. /usr/lib/systemd/scripts/nfs-utils_env.sh这是一个开机自启动服务要用到的脚 ...

  3. MySQL找回管理员密码

    更改MySQL提示符 mysql> prompt \u@mysql \r:\b:\s 查找以my开头的数据库 mysql> show databases like 'my%' 删除用户所有 ...

  4. java ArrayList 实现

    关于ArrayList的实现和原理,原文出处:http://www.cnblogs.com/ITtangtang/p/3948555.html 我觉得他写的非常好,真的很好. 做一个记录和总结吧 pu ...

  5. Multiple dex files define Lcom/google/zxing/BarcodeFormat

    解决zxing “Could not find class 'com.goole.zxing.Result”和“Multiple dex files define”问题 时间 2014-04-24 1 ...

  6. ASP.NET知识总结（3.HTTP协议详解）

    引言 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1. ...

  7. sql server 语句使用规范

    Sql语句使用规范 规范内容以及注意事项: 1.查询时候使用top 10 /top 100 和where 字句控制每次执行SQL 返回的结果集合,在满足业务需求的同时返回最小的结果. 2.使用数据投影 ...

  8. 分布式追踪系统dapper

    http://www.cnblogs.com/LBSer/p/3390852.html 最近单位需要做自己的分布式监控系统,因此看了一些资料,其中就有google的分布式追踪系统dapper的论文:h ...

  9. 13.linux中断处理程序

    linux中断处理程序 一.中断处理流程 在linux内核代码中进入entry-armv.S目录: linux统一的入口:__irq svc. 进入了统一的入口之后,程序跳到irq_handler标号 ...

  10. 数据库错误：check the manual that corresponds to your MySQL server version for the right sy

    检查对应到您的MySQL服务器版本附近使用正确的语法手册 数据库插入的时候出现上述问题,总结了两方面原因: 1.语法错误,这是百度之得到的大部分结果,但是没有解决我的问题 2.仔细观察我的sql语句, ...