<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

<meta charset="utf-8">

<!-- add styles -->

<link href="css/style.css" rel="stylesheet" type="text/css" />

<!-- add javascripts -->

<!-- <script src="js/jquery-2.1.3.min.js"></script> 不需要 -->

<script src="js/angular.min.js"></script>

<!-- <script src="js/angular-animate.min.js"></script> 不需要 -->

<script src="js/angular-touch.min.js"></script>

<script src="js/app.js"></script>

</head>

<body>

    <div ng-controller="myController">

        <div class="type-tabs">

            <div ng-repeat="item in [1,2,3,4]" ng-click="changeIndex($index)">Tab{{item}}</div>

        </div>

        <div class="guid-bar">

            <div class="guid-bar-content" style="left:{{25*activeIndex}}%"></div>

        </div>

        <div class="tab-content" ng-swipe-right="swipeRight()" ng-swipe-left="swipeLeft()">

            <div class="tab-content-inner" style="left:{{ -100*activeIndex}}%">

                <div class="tab-content-item" ng-repeat="item in [1,2,3,4]" >

                    <h1 ng-bind="'Tab' + item"></h1>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

<!-- http://codepen.io/dayu/pen/dPggXZ/ -->
*{margin:; padding:; border: none; font-family:'Arial';}

.type-tabs{width: 100%; height: 40px;}

.type-tabs div{float: left; width: 25%; line-height: 40px; text-align: center; cursor:pointer; user-select:none; -webkit-user-select:none;}

.guid-bar{position: relative; margin-top: -3px;}

.guid-bar-content{width: 25%; height: 3px; background-color: #345; position: absolute; left: 50%; transition:all 400ms ease;}

.tab-content{width: 100%; height: 500px; background-color: #ccc; overflow: hidden;}

.tab-content-inner{width: 400%; position: relative; transition: all 400ms;}

.tab-content-item{width: 25%; float: left; text-align:center;}
var myApp = angular.module('myApp', ['ngTouch']); //'ngAnimate', 

myApp.controller('myController', function ($scope) {

    $scope.activeIndex=0;

    $scope.changeIndex=function(index){

        $scope.activeIndex=index;

    };

    $scope.swipeLeft=function(){

        $scope.activeIndex=++$scope.activeIndex;

        $scope.check();

    };

    $scope.swipeRight=function(){

        $scope.activeIndex=--$scope.activeIndex;

        $scope.check();

    };

    $scope.check=function(){

        if($scope.activeIndex>3){

            $scope.activeIndex=0;

        }

        if($scope.activeIndex<0){

            $scope.activeIndex=3;

        }

    }

});

tabswitch的更多相关文章

  1. tab-switch 样式的添加 与 tab元素样式的切换

    要点: 1.多个div类名相同情况下添加class样式 2.siblings() 方法返回被选元素的所有同级元素.DOM 树:该方法沿着 DOM 元素的同级元素向前和向后遍历. 3.利用索引,只添加当 ...

  2. 【IDEA】intellij idea 插件推荐

    CSDN 2016博客之星评选结果公布    [系列直播]零基础学习微信小程序!      "我的2016"主题征文活动   博客的神秘功能 [IDEA]intellij idea ...

  3. IDEA插件

    Key Promoter 快捷键提示插件,帮助你快速记住快捷键.当你用鼠标完成某功能时,它会指示有相应的快捷键来完成刚才的功能,同时指导你为经常重复的操作建立快捷键. SerialVersionUID ...

  4. 面向对象和面向过程的js版选项卡

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. 堆糖瀑布流完整解决方案(jQuery)

    2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...

  6. this指向

    以前不太理解面向对象的this指向问题,今天自己看着视频教程,加自己学了2个例子,终于明白点了. 我们在写对象程序的时候,我们希望保持this始终是指向对象的,但事实确常常事与愿违. 正常情况this ...

  7. JavaScript特效（调试笔记）

    JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...

  8. js面向对象选项卡

    window.onload=function() //面向对象 { var tab=new tabSwitch("div1"); var tab=new tabSwitch(&qu ...

  9. 【读书笔记】读《JavaScript设计模式》之观察者模式

    一.定义 在事件驱动的环境中,比如浏览器这种持续寻求用户关注的环境中,观察者模式(又名发布者-订阅者(publisher-subscripber)模式)是一种管理人与其任务之间的关系(确切地讲,是对象 ...

随机推荐

  1. Unity3D RPC调用顺序问题

    使用Unity自带的Network实现多人协同任务时,因为使用RPC传递消息.RPC即远程过程调用,对于它的使用,第一反应的问题就是如果连续两次调用RPC,RPC的函数会顺序执行吗?还是只要RPC的消 ...

  2. BZOJ 1050 旅行

    Description 给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权值Vi(Vi<30000).给你两个顶点S和T,求一条路径,使得路径上最大 ...

  3. Eclipse ARM IDE 开发环境

    一.Eclipse Eclipse的本身只是一个框架平台,但是众多插件的支持,使得Eclipse拥有较好的灵活性. 二.CDT CDT是Eclipse用于扩展Eclipse支持C/C++开发的插件. ...

  4. Shader Forge 刀光溶解

    实际特效时,时间可以控制vertex color.a,shader forge 还只是玩具,试验用具,离商业产品质量还有差距. 其实,有技术美术的画,很多问题,美术能自己解决,都是一些欠缺通道的问题, ...

  5. WCF扩展系列 - 行为扩展(Behaviors)

    原文地址:http://www.cnblogs.com/Creator/archive/2011/05/21/2052687.html 这个系列的第一部分将会重点关注WCF行为(behaviors), ...

  6. nyist 58 最小步数 BFS

    最少步数 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1 1,0,0,1,0,0,1,0,1 1,0 ...

  7. Selenium webdriver 操作IE浏览器

    V1.0版本:直接新建WebDriver使用 import org.openqa.selenium.WebDriver; import org.openqa.selenium.ie.InternetE ...

  8. 跑步进入全站 HTTPS ，这些经验值得你看看

    随着国内网络环境的持续恶化,各种篡改和劫持层出不穷,越来越多的网站选择了全站 HTTPS.就在前几天,免费提供证书服务的 Let’s Encrypt 项目也正式开放测试,HTTPS 很快就会成为 WE ...

  9. How many - HDU 2609 （trie+最小表示）

    题目大意:有 N 个手链,每个手链的最大长度不超过100,求出来最多有多少个不同的手链.   分析:因为手链是可以转动的,所以只要两个手链通过转动达到相同,那么也被认为是一种手链,然而如果每次都循环比 ...

  10. 终止imp/exp和expdp/impdp进程运行的方法

    一.停止EXP/IMP优化速度 可以直接KILL 进程,但先要KILL 父进程,然后KILL子进程,只KILL子进程,EXP/IMP还会在后台执行的 样例:ps -ef |grep imp 查询到pi ...