<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

        <style type="text/css">

            body,td,th,ul,li{

                font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;

                padding:;

                margin:;

            }

            a{

            color: #;

            text-decoration:none;

            cursor:pointer;

            }

            .find_nav {

                width: %;

                height: 50px;

                background-color: #f9f9f9;

                position: fixed;

                top: ;

                z-index: ;

                border-bottom: 1px solid #ddd;

                display: -moz-box;

                display: -webkit-box;

                display: box;

            }

            .find_nav_left {

                height: 50px;

                position: relative;

                overflow: hidden;

                -moz-box-flex: ;

                -webkit-box-flex: ;

                box-flex: ;

            }

            .find_nav_list {

                position: absolute;

                left: ;

            }

            .find_nav_list ul {

                position: relative;

                white-space: nowrap;

                font-size: ;

            }

            .find_nav_list ul li {

                display: inline-block;

                padding: ;

                margin: 20px;

            }

            .find_nav_list ul li a {

                display: block;

                width: %;

                height: %;

                line-height: 50px;

                font-size: 14px;

                text-align: center;

                color: #;

            }

            .find_nav_cur a {

                color: #48a5f4 !important;

            }

            .find_nav_list a.active{ color:#C00}

            .sideline {

                display: block;

                position: absolute;

                border: ;

                height: 2px;

                background-color: #48a5f4;

                left: ;

                top: 48px;

                pointer-events: none;

            }

            .li_list{ min-height:800px; font-size:40px; line-height:800px; color:#fff; text-align:center}

            .swipe{ padding:70px   ;}

        </style>

    </head>

    <body>

        <div class="find_nav">

            <div class="find_nav_left">

                <div class="find_nav_list" id="pagenavi1">

                    <ul>

                        <li><a href="#" class="active">新闻</a></li>

        　　　　　　　　    <li><a href="#">商业计划书</a></li>

        　　　　　　　　    <li><a href="#">会计师</a></li>

        　　　　　　　    <li><a href="#">律师</a></li>

        　　　　　　　　    <li><a href="#">贷款</a></li>

        　　　　　　　　    <li><a href="#">管理</a></li>

        　　　　　　　　    <li><a href="#">融资</a></li>

        　　　　　　　　    <li><a href="#">顾问</a></li>

        　　　　　　　　    <li><a href="#">公关</a></li>

        　　　　　　　　    <li><a href="#">培训</a></li>

        　　　　　　　　    <li class="sideline"></li>

                    </ul>

                </div>

            </div>

        </div>

        <div id="slider1" class="swipe">

          <ul class="box01_list">

            <li class="li_list" style="background:#db7575"></li>

            <li class="li_list" style="background:#75b140"></li>

            <li class="li_list" style="background:#b16b40"></li>

            <li class="li_list" style="background:#4053b1"></li>

            <li class="li_list" style="background:#b14080"></li>

            <li class="li_list" style="background:#4dd1b3"></li>

            <li class="li_list" style="background:#bea30e"></li>

            <li class="li_list" style="background:#865bb3"></li>

            <li class="li_list" style="background:#69b03f"></li>

            <li class="li_list" style="background:#c25e28"></li>

          </ul>

        </div>

        <script type="text/javascript" src="jquery-1.10.2.js"></script>

        <script type="text/javascript" src="touchslider.js"></script>

        <script type="text/javascript">

            $(".find_nav_list").css("left",);

            $(".find_nav_list li").each(function(){

                    $(".sideline").css({left:});

                    $(".find_nav_list li").eq().addClass("find_nav_cur").siblings().removeClass("find_nav_cur");

            });

            var nav_w=$(".find_nav_list li").first().width();

            $(".sideline").width(nav_w);

            $(".find_nav_list li").on('click', function(){

                nav_w=$(this).width();

                $(".sideline").stop(true);

                //position()方法返回匹配元素相对于父元素的位置（偏移）

                $(".sideline").animate({left:$(this).position().left},);

                $(".sideline").animate({width:nav_w});

                $(this).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");

                //（375-当前点击元素的宽度）/2

                var fn_w = ($(".find_nav").width() - nav_w) / ;

                var fnl_l;

                var fnl_x = parseInt($(this).position().left);

                if (fnl_x <= fn_w) {

                    fnl_l = ;

                } else if (fn_w - fnl_x <= flb_w - fl_w) {

                    fnl_l = flb_w - fl_w;

                } else {

                    fnl_l = fn_w - fnl_x;

                }

                $(".find_nav_list").animate({

                    "left" : fnl_l

                }, );

            });

            var fl_w=$(".find_nav_list").width();//

            var flb_w=$(".find_nav_left").width();//

            $(".find_nav_list").on('touchstart', function (e) {

                var touch1 = e.originalEvent.targetTouches[];

                x1 = touch1.pageX;

                y1 = touch1.pageY;

                ty_left = parseInt($(this).css("left"));

            });

            $(".find_nav_list").on('touchmove', function (e) {

                var touch2 = e.originalEvent.targetTouches[];

                var x2 = touch2.pageX;

                var y2 = touch2.pageY;

                if(ty_left + x2 - x1>=){

                    $(this).css("left", );

                }else if(ty_left + x2 - x1<=flb_w-fl_w){

                    $(this).css("left", flb_w-fl_w);

                }else{

                    $(this).css("left", ty_left + x2 - x1);

                }

                if(Math.abs(y2-y1)>){

                    e.preventDefault();

                }

            });

            var page='pagenavi1';

            var mslide='slider1';

            var as=$('#pagenavi1').find('a');

            var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:,timeout:,before:function(index){

                //as[this.p]:前一个a标签

                as[this.p].className='';

                //this.p:下标，前一个a标签的下标

                //index：当前下标

                this.p=index;

                fnl_x =  parseInt($(".find_nav_list li").eq(this.p).position().left);

                var li_height=$(".swipe").find('li').eq(this.p).height();

                $('.swipe').css('height',li_height);

                nav_w=$(".find_nav_list li").eq(this.p).width();

                $(".sideline").stop(true);

                $(".sideline").animate({left:$(".find_nav_list li").eq(this.p).position().left},);

                $(".sideline").animate({width:nav_w},);

                $(".find_nav_list li").eq(this.p).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");

                var fn_w = ($(".find_nav").width() - nav_w) / ;

                var fnl_l;

                if (fnl_x <= fn_w) {

                    fnl_l = ;

                } else if (fn_w - fnl_x <= flb_w - fl_w) {

                    fnl_l = flb_w - fl_w;

                } else {

                    fnl_l = fn_w - fnl_x;

                }

                $(".find_nav_list").animate({

                    "left" : fnl_l

                }, );

            }});

            tt.page = page;

            tt.p = ;

            //点击a对应的li内容显示

            for(var i=;i<as.length;i++){

                (function(){

                    var j=i;

                    as[j].tt = tt;

                    as[j].onclick=function(){

                        this.tt.slide(j);

                        return false;

                    }

                })();

            }

        </script>

    </body>

</html>

效果：

链接资料：http://www.bcty365.com/demo-13-530-2.html

利用touchslide实现tab滑动切换的更多相关文章

  1. uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题

    效果图: tab栏可以滑动,切换页面跟随tab栏同步滑动.这里需要注意的是使用swiper组件时,它会有一个默认的高度,你必须动态的获取数据列表的高度覆盖原来的默认高度. 下面是代码 html < ...

  2. Android典型界面设计——ViewPage+Fragment实现区域顶部tab滑动切换

    一.问题描写叙述 本系列将结合案例应用,陆续向大家介绍一些Android典型界面的设计,首先说说tab导航,导航分为一层和两层(底部区块+区域内头部导航).主要实现方案有RadioGroup+View ...

  3. 小程序做一个能够左右滑动切换的多tab页面

    主要原理:使用 <swiper> 和 <scroll-view> 组件 代码片段: https://developers.weixin.qq.com/s/mLx4FWmF757 ...

  4. Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮

    Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区.       ...

  5. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  6. 微信小程序滚动Tab选项卡：左右可滑动切换

    最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当 ...

  7. 微信小程序tab切换，可滑动切换，导航栏跟随滚动实现

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...

  8. 转载【微信小程序】：微信小程序滚动Tab选项卡：左右可滑动切换(仿某宝)

    1.本文转载至:http://blog.csdn.net/sophie_u/article/details/71745125 2.效果: 3.最终效果如上.问题: 1).tab标题总共8个,所以一屏无 ...

  9. android tab之间滑动切换界面功能

    1. onTouchListener();                       //捕捉touch事件,比如说onDown 需要将可滑动的控件加上两个方法:(1)view.setOnTouch ...

随机推荐

  1. ubuntu 16.04 ARM glog移植

    1. 下载源文件https://github.com/google/glog 2. 源文件有CMakeLists.txt, 直接使用toolchain.cmake 直接编译就可以了,详情参考我的随笔  ...

  2. 二项分布 ， 多项分布， 以及与之对应的beta分布和狄利克雷分布

    1. 二项分布与beta分布对应 2. 多项分布与狄利克雷分布对应 3. 二项分布是什么?n次bernuli试验服从 二项分布 二项分布是N次重复bernuli试验结果的分布. bernuli实验是什 ...

  3. ServletContext作用功能详解.RP

    ServletContext ServletContext,是一个全局的储存信息的空间,服务器开始,其就存在,服务器关闭,其才释放.request,一个用户可有多个:session,一个用户一个:而s ...

  4. javascript总结3:javaScript的 Math 对象

    Math 对象 Math 对象用于执行数学任务. Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(). Math 常用的方法 var n1=1234; v ...

  5. HDU 6034 Balala Power! (贪心+坑题)

    题意:给定一个 n 个字符串,然后问你怎么给 a-z赋值0-25,使得给定的字符串看成26进制得到的和最大,并且不能出现前导0. 析:一个很恶心的题目,细节有点多,首先是思路,给定个字符一个权值,然后 ...

  6. web大文件上传控件-设置附加参数-Xproer.HttpUploader6

    自定义附加字段在up6.js中定义,也可以不用定义: 注意: 1.附加字段必须是字符串类型. 2.如果附加字段的值包含中文,在上传前必须使用encodeURIComponent进行编码.     在引 ...

  7. poj2002 Squares(hash+折半枚举)

    Description A square is a 4-sided polygon whose sides have equal length and adjacent sides form 90-d ...

  8. ComicEnhancerPro 系列教程十八：JPG文件长度与质量

    作者:马健邮箱:stronghorse_mj@hotmail.com 主页:http://www.comicer.com/stronghorse/ 发布:2017.07.23 教程十八:JPG文件长度 ...

  9. 多个fragment中重叠问题的解决方法

    这个方法适用性有限. 我的是一个mainActivity,然后下部四个按钮,点击时先隐藏所有的fragment,然后再new一个新的出来,如果存在,则直接显示出来,看上去一切都没有问题. 但是通过fr ...

  10. "ServiceStack.Redis.RedisNativeClient”的方法“get_Db”没有实现。

    解决办法: 1.首先通过nuget程序包管理器将相关依赖项卸载干净 2.检查各项目模块中的package.config里还有没有redis的节点,如果已经存在就删除掉 3.去别的正常的项目中看一下re ...