1、炫酷的图片是开端啊

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center">

2、前端html 代码

	<div class="container-fluid row">
<timelineaxis ng-show="paramId>0">
<timeaxis-item ng-repeat="item in items">
<a href="#/taxrm/edit/{{item.versionid}}" ng-class="{'active':paramId==item.versionid}">
<timeaxis-point></timeaxis-point>
<timeaxis-panel>{{item.content}}</timeaxis-panel>
</a>
</timeaxis-item>
</timelineaxis>
<div class="timeaxis-hide" ng-show="paramId>0" timeaxis-hide ng-click="hide()"></div>
</div>

3、angular directive

var TaxApp = angular.module('MyApp');
TaxApp.directive("timelineaxis", function () {
return {
restrict: 'AE',
transclude: true,
template: '<div class="timeaxis-warpper" ><ul class="timeaxis" ng-transclude></ul></div>'
};
}); TaxApp.directive("timeaxisItem", function () {
return {
require: '^timeaxis',
restrict: 'AE',
transclude: true,
template: '<li ng-class-even="\'timeaxis-inverted\'" ng-transclude ></li>'
};
}); TaxApp.directive("timeaxisPoint", function () {
return {
require: '^timeaxisItem',
restrict: 'AE',
transclude: true,
template: '<div class="timeaxis-point"><span></span></div>'
};
}); TaxApp.directive("timeaxisPanel", function () {
return {
require: '^timeaxis',
restrict: 'AE',
transclude: true,
template: '<div class="timeaxis-panel" ng-transclude></div>'
};
}); TaxApp.directive("timeaxisHide", function () {
return {
require: '^timeaxisWarpper',
restrict: 'AE',
transclude: true,
template: '<span class="glyphicon glyphicon-menu-up"></span>'
};
});

4、angular controller

angular.module('MyApp').controller('taxrmedit',function($scope,$routeParams){
$scope.paramId = $routeParams.id; if ($scope.paramId > 0) {
$scope.timeaxis = function () {
$scope.items = [{ versionid: 10, content: '2015.07.01~' }, { versionid: 9, content: '2015.05.01~2015.07.01' }, { versionid: 8, content: '2014.12.01~2015.05.01' }, { versionid: 7, content: '2014.01.01~2014.12.01' }, { versionid: 6, content: '2013.10.01~2014.01.01' }];
}; $scope.timeaxis();
}
$scope.hide = function () {
if (angular.element("timelineaxis").attr("style") === undefined || angular.element("timelineaxis").attr("style") != "display: none;") {
angular.element("timelineaxis").hide();
angular.element(".timeaxis-hide>span").removeClass("glyphicon-menu-up");
angular.element(".timeaxis-hide>span").addClass("glyphicon-menu-down");
} else {
angular.element("timelineaxis").show();
angular.element(".timeaxis-hide>span").removeClass("glyphicon-menu-down");
angular.element(".timeaxis-hide>span").addClass("glyphicon-menu-up");
}
}; });

5、样式表

/*时间轴主区设置*/
.timeaxis-warpper
{
overflow-x: auto;
overflow-y: hidden;
display: block;
margin-right: 15px;
padding-left: 15px;
overflow-x: auto;
overflow-y: hidden;
}
/*时间轴箭头设置*/
.timeaxis-warpper:before
{
position: relative;
top: 63px;
left: -15px;
display: inline-block;
border-top: 7px solid transparent;
border-left: 0 solid #00ced1;
border-right: 15px solid #00ced1;
border-bottom: 7px solid transparent;
content: " ";
} .timeaxis
{
padding: 0;
list-style: none;
height: 100px;
position: relative;
width: 100%;
display: inline-flex;
} /*时间轴线设置*/
.timeaxis:before
{
top: 0;
bottom: 0;
position: absolute;
content: " ";
height: 3px;
background-color: #00ced1;
top: 50%;
width: 100%;
}
/*轴线点设置*/
.timeaxis-point
{
width: 8px;
height: 8px;
top: 48px;
margin-left: 65px;
border-radius: 4px;
border: 1px solid #00ced1;
background-color: #ffffff;
background-repeat: no-repeat;
position: absolute;
} .timeaxis-point span
{
color: #bab9c9;
font-size: 10px;
padding: 0;
margin: 0;
position: relative;
left: -5px;
} /*设置区域*/
.timeaxis li
{
float: left;
width: 140px;
height: 30px;
} a .timeaxis-panel
{
background-color: #fff;
float: left;
top: 5px;
border: 1px solid #d4d4d4;
border-radius: 2px;
width: 100%;
height: 100%;
position: relative;
padding: 5px 5px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.175);
} a .timeaxis-panel span
{
color: #333333;
} .timeaxis-panel:before
{
position: absolute;
bottom: -13px;
top: auto;
left: 57px;
display: inline-block;
border-top: 13px solid #ccc;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 0px solid #ccc;
content: " ";
} .timeaxis-panel:after
{
position: absolute;
bottom: -12px;
top: auto;
left: 58px;
border-top: 12px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 0px solid #fff;
content: " ";
} a.active .timeaxis-panel,
a:focus .timeaxis-panel
{
border: 1px solid #00ced1;
background-color: #00ced1;
} a.active .timeaxis-panel span,
a:focus .timeaxis-panel span
{
color: #ffffff;
} a.active .timeaxis-panel:before,
a:focus .timeaxis-panel:before
{
position: absolute;
bottom: -13px;
top: auto;
left: 57px;
display: inline-block;
border-top: 13px solid #00ced1;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 0px solid #00ced1;
content: " ";
} a.active .timeaxis-panel:after,
a:focus .timeaxis-panel:after
{
position: absolute;
bottom: -12px;
top: auto;
left: 58px;
border-top: 12px solid #00ced1;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 0px solid #00ced1;
content: " ";
} a.active .timeaxis-point
{
width: 8px;
height: 8px;
top: 48px;
margin-left: 65px;
border-radius: 4px;
border: 2px solid #ffffff;
background-color: #00ced1;
background-repeat: no-repeat;
position: absolute;
} .timeaxis-inverted .timeaxis-panel
{
top: 67px;
} .timeaxis-inverted .timeaxis-panel:before
{
position: absolute;
bottom: auto;
top: -12px;
left: 57px;
display: inline-block;
border-top: 0px solid #ccc;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 12px solid #ccc;
content: " ";
} .timeaxis-inverted .timeaxis-panel:after
{
position: absolute;
bottom: auto;
top: -11px;
left: 58px;
border-top: 0px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 11px solid #fff;
content: " ";
} .timeaxis-inverted a.active .timeaxis-panel:before,
.timeaxis-inverted a:focus .timeaxis-panel:before
{
position: absolute;
bottom: auto;
top: -12px;
left: 57px;
display: inline-block;
border-top: 0px solid #00ced1;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 12px solid #00ced1;
content: " ";
} .timeaxis-inverted a.active .timeaxis-panel:after,
.timeaxis-inverted a:focus .timeaxis-panel:after
{
position: absolute;
bottom: auto;
top: -11px;
left: 58px;
display: inline-block;
border-top: 0px solid #00ced1;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 11px solid #00ced1;
content: " ";
} .timeaxis-hide {
width: 100%;
padding-left: 50%;
height: 15px;
background-color: #00ced1;
color: #ffffff;
position: relative;
display: inline-block;
}

完活。!!

angularjs时间轴的更多相关文章

  1. AngularJS时间轴指令

    是基于ion.rangeSlider.js,主要代码如下: <link rel="stylesheet" type="text/css" href=&qu ...

  2. iOS之TimeLine(时间轴)的实现

    这是一个关于OC时间轴的简单实现,我认为重要的是思路. 感谢作者:Cyandev 的文章<iOS 实现时间线列表效果>给的思路.这里先附上Objective-C的代码实现,有时间再去试试S ...

  3. 08. Web大前端时代之:HTML5+CSS3入门系列 ~ QQ空间时间轴

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...

  4. [原创]首次制作JQueryUI插件-Timeline时间轴

    特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...

  5. SmohanTimeLine.js 酷炫的时间轴效果

    展示地址 点此下载 原文出处 一.参数说明 item : '.item', //项目元素 top : 30, //与下一行的间距 pointWidth : 22, //时间点宽度 cornerWidt ...

  6. jquery时间轴幻灯展示源代码

    查看效果:http://hovertree.com/texiao/jquery/75/ 源代码下载:http://hovertree.com/h/bjaf/8jlpc2wu.htm 效果图如下: 代码 ...

  7. Timeline Portfolio - 时间轴作品集效果

    这里分享一个超炫的时间轴展示作品集效果.设计师和前端开发人员可以借助这个效果来制作新颖的作品集和个人简历.时间轴专门用来呈现出年代的一系列事件.您可以把这种效果嵌入各种媒体,包括微博,视频和地图,并把 ...

  8. JQuery+HTML5+CSS3制作时间轴插件,支持响应式布局

    一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...

  9. 纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!

    前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...

随机推荐

  1. 0505 php-数组、控制语句、函数

    数 组 (定义.使用.赋值.遍历.分类.冒泡排序) 1.数组包括元素.下标.数组长度 2.php中的数组长度用$len = count("$数组名"); 3.定义一个数组:$arr ...

  2. linux的shell函数参数

    在Shell中,调用函数时可以向其传递参数.在函数体内部,通过 $n 的形式来获取参数的值,例如,$1表示第一个参数,$2表示第二个参数... 带参数的函数示例: #!/bin/bash funWit ...

  3. php 原生简版日志导出

    <?phpfunction writeLog($msg){ $logFile = date('Y-m-d').'.txt'; $msg = date('Y-m-d H:i:s').' >& ...

  4. PHP序列化 反序列化

    序列化是将变量转换为可保存或传输的字符串的过程:反序列化就是在适当的时候把这个字符串再转化成原来的变量使用.这两个过程结合起来,可以轻松地存储和传输数据,使程序更具维护性. 1. serialize和 ...

  5. EasyUI 编写实体类树状选择器

    <%@ page contentType="text/html;charset=UTF-8"%> <%@ include file="/WEB-INF/ ...

  6. HTML+CSS(11)

    n  CSS背景属性 Background-color:背景色. Background-image:背景图片地址.如:background-image:url(images/bg.gif;) Back ...

  7. MatLab之HDL coder

    1 Workflow The workflow for applying HDL code generation to the hardware design process requires the ...

  8. C++:C++在图片特定区域之外产生随机数

    参考原文:C++产生随机数 (整数) C++在图片特定区域之外产生随机数,避开正则表达式,可以分为两种情况. 第一种:在某个数之前生成随机数:第二种,生成随机数,加上某个数,然后截断:第三种,指定范围 ...

  9. msmq消息队列使用场景

    MSMQ全称是Microsoft Message Queue——微软消息队列. MSMQ是一种通信的机制,因为是一种中间件技术,所以它能够支持多种类型的语言开发,同时也是跨平台的通信机制,也就是说MQ ...

  10. springboot测试类

    Controller测试类 /** * Created by zhiqi.shao on 2017/5/12. */ @RunWith(SpringJUnit4ClassRunner.class) @ ...