利用touchslide实现tab滑动切换

<!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滑动切换的更多相关文章

uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题
效果图: tab栏可以滑动,切换页面跟随tab栏同步滑动.这里需要注意的是使用swiper组件时,它会有一个默认的高度,你必须动态的获取数据列表的高度覆盖原来的默认高度. 下面是代码 html < ...
Android典型界面设计——ViewPage+Fragment实现区域顶部tab滑动切换
一.问题描写叙述本系列将结合案例应用,陆续向大家介绍一些Android典型界面的设计,首先说说tab导航,导航分为一层和两层(底部区块+区域内头部导航).主要实现方案有RadioGroup+View ...
小程序做一个能够左右滑动切换的多tab页面
主要原理:使用 <swiper> 和 <scroll-view> 组件代码片段: https://developers.weixin.qq.com/s/mLx4FWmF757 ...
Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮
Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区. ...
利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置如 <a href="#tab1">tab1</a> <div id="tab1& ...
微信小程序滚动Tab选项卡：左右可滑动切换
最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当 ...
微信小程序tab切换，可滑动切换，导航栏跟随滚动实现
简介看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...
转载【微信小程序】：微信小程序滚动Tab选项卡：左右可滑动切换(仿某宝)
1.本文转载至:http://blog.csdn.net/sophie_u/article/details/71745125 2.效果: 3.最终效果如上.问题: 1).tab标题总共8个,所以一屏无 ...
android tab之间滑动切换界面功能
1. onTouchListener(); //捕捉touch事件,比如说onDown 需要将可滑动的控件加上两个方法:(1)view.setOnTouch ...

随机推荐

CF835F Roads in the Kingdom
话说这是去年大爷的一道NOIP模拟赛题,对着大爷的代码看了一堂课的我终于把这题写掉了. 本题要求在基环树给定的环上删去一条边使剩下的树的直径最小,输出这个最小直径. 那么基环树可以画成这样子的: 有一 ...
Java日志组件logback使用：加载非类路径下的配置文件并设置定时更新
Java日志组件logback使用:加载非类路径下的配置文件并设置定时更新摘自: https://blog.csdn.net/johnson_moon/article/details/7887449 ...
再谈JavaScript的closure--JavaScript 闭包
关于JavaScript的闭包,在我的博客上之前有一篇文章 https://www.cnblogs.com/wphl-27/p/8491327.html 今天看了几篇文章,感觉又有了一些更深的理解,特 ...
C# 关于接口与基类的理解（二者的区别）
接口(接口的名称一般用大写字母I开头的)是把公共实例(非静态)方法和属性组合起来,以封装特定功能的一个集合.(其实,接口简单理解就是一种约定,使得实现接口的类或结构在形式上保持一致) 注意:使用接口可 ...
二度Xml<2>
一下介绍xml的基本操作,添加xml新节点: 其他方法在前一篇日记中有详细讲解,请详见:http://www.cnblogs.com/fjsnail/archive/2012/10/20/273212 ...
第16章-使用Spring MVC创建REST API
1 了解REST 1.1 REST的基础知识 REST与RPC几乎没有任何关系.RPC是面向服务的,并关注于行为和动作:而REST是面向资源的,强调描述应用程序的事物和名词. 为了理解REST是什么, ...
Http Live Streaming 实现iphone在线播放视频[转]
http://hi.baidu.com/lphack/item/83865611c5f82c8988a956df 本人新手,难免会出错,请各位指点! 最近要做一个项目,是通过iphone来播放工厂摄像 ...
spring+hibernate工作流程文件名理解
reg.jsp regsuccess.jsp User.java UserDAO.java UserDAOImpl.java User.hbm.xml Reg.java RegImpl.java Re ...
见过最好的mybatis学习网站
http://blog.csdn.net/techbirds_bao/article/details/9233599/
XE下的FMX中压缩图片
用FMX压缩图片,发现FMX里的canvas没有draw,stretch,cliprect类,FMX里程序创建时会自动引用FMX.Graphics, 而这个单元内的TBitmap类的Canvas没有S ...

利用touchslide实现tab滑动切换

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

随机推荐

热门专题