<!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. jdbc中Statement和PreparedStatement有什么区别？哪个性能更好？

    Statement和PreparedStatement的功能主要是对sql语句的执行 区别 (1)Statement每执行一条sql语句就需要生成一条执行计划,执行100条就需要100条执行计划Pre ...

  2. PHP加密与解密

    password_hash ( string $password , integer $algo [, array $options ] ) 加密,生成60位得字符串 $algo:一个用来在散列密码时 ...

  3. MySQL性能调优与架构设计——第6章 MySQL Server 性能的相关因素

    第6章 MySQL Server 性能的相关因素 前言 大部分人都一致认为一个数据库应用系统(这里的数据库应用系统概指所有使用数据库的系统)的性能瓶颈最容易出现在数据的操作方面,而数据库应用系统的大部 ...

  4. ORCHARD学习教程-介绍

    ORCHARD 是什么? Orchard 是由微软公司创建,基于 ASP.NET MVC 技术的免费开源内容管理系统: 可用于建设博客.新闻门户.企业门户.行业网站门户等各种网站 简单易用的后台界面 ...

  5. mobiscroll_2.15.1

    var opt_sex = { theme: 'ios', lang: 'zh', formatValue: function (d) { return d.join(','); }, customW ...

  6. SQL 2005报错之Restore fail for Server 'DatabaseServerName'.

    Restore fail for Server 'DatabaseServerName'.(Microsoft.SqlServer.Smo) Additional information: Syste ...

  7. intellij idea 15,webstorm 最新注册破解

    http://idea.lanyus.com 在激活地址填写上上面的地址就行了,非常简单有效. 亲测idea,webstorm...都可以激活

  8. 【bzoj3512】DZY Loves Math IV 杜教筛+记忆化搜索+欧拉函数

    Description 给定n,m,求\(\sum_{i=1}^{n}\sum_{j=1}^{m}\varphi(ij)\)模10^9+7的值. Input 仅一行,两个整数n,m. Output 仅 ...

  9. 题解 P1434 【滑雪】

    题目链接 此题运用功能强大的 ~~暴力搜索~~ 记忆化搜索才是重点!!! 然而,这是一道经典的DP问题 如果我们用$dis[i][j]$来表示坐标为$(i,j)$时的高度 $cnt[i][j]$ 是我 ...

  10. 洛谷P4015 运输问题（费用流）

    传送门 源点向仓库连费用$0$,流量为储量的边,商店向汇点连费用$0$,流量为需求的边,然后仓库向商店连流量$inf$,费用对应的边,跑个费用流即可 //minamoto #include<io ...