代码

样式文件style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.timeline{ 
    position: absolute; 
    z-index: 5000; 
    font-size: 12px; 
    border: 1px solid #ccc; 
    background: whitesmoke; 
    background: -webkit-linear-gradient(top, whitesmoke, #ddd); 
    background: -ms-linear-gradient(top, whitesmoke, #ddd); 
    background: -moz-linear-gradient(top, whitesmoke, #ddd); 
    border-radius: 4px 0 4px 0; 
    box-shadow: 0px 0px 10px rgba(150,150,150,0.5); 
} 
.timeline ul.ulvec{ 
    margin-left: 10px; 
    list-style: none; 
    background: url("dot.gif") 0px 0px repeat-y; 
    padding-right: 10px; 
} 
.timeline ul li.livec{ 
    margin-left: -43px; 
    padding: 0px 0px 0px 12px; 
    background: url("biggerdot.png") 0px 50% no-repeat; 
    cursor: pointer; 
} 
.timeline ul.ulhor{ 
    margin: 0px; 
    padding: 5px 10px; 
    list-style: none; 
    background: url("dot.gif") 0px 5px repeat-x; 
} 
.timeline ul li.lihor{ 
    display: inline-block; 
    margin: 0px; 
    padding: 10px 0px 0px 0px; 
    margin-top: -3px; 
    background: url("biggerdot.png") 50% 0px no-repeat; 
    cursor: pointer; 
} 
.timeline ul li span{ 
    display: block; 
    padding: 4px 15px; 
    border: 1px solid transparent; 
} 
.timeline ul li.active span{ 
    color: #f2f2f2; 
    box-shadow: inset 0px 0px 30px #333333; 
    border-radius: 4px; 
    border: 1px solid #ffffff; 
    background: #666; 
}

控件代码 jquery.custom.timeline.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
(function($){ 
    $.fn.TimeLine = function(options){ 
        var defaults = { 
            data:null, 
            vertical:false 
        }; 
   
        var options = $.extend(defaults,options); 
        var _data = options.data; 
        var _vertical = options.vertical; 
        var _showDiv = $(this).addClass("timeline"); 
        var _ul = $("<ul />").appendTo(_showDiv); 
        if(_vertical){ 
            _ul.addClass("ulvec"); 
        } 
        else{ 
            _ul.addClass("ulhor"); 
        } 
        for(var i= 0,dl=_data.length;i<dl;i++){ 
            var _li = $("<li />").appendTo(_ul); 
            if(_vertical){ 
                _li.addClass("livec"); 
            } 
            else{ 
                _li.addClass("lihor"); 
            } 
            var _span = $("<span />").attr("value",_data[i].value).html(_data[i].label).appendTo(_li); 
            _span.on("click",function(){ 
                var _value = this.getAttribute("value"); 
                active(_value); 
            }); 
        } 
        function active(value){ 
            $("li").removeClass("active"); 
            var _spans = $("ul").find("span"); 
            for(var i= 0,dl=_spans.length;i<dl;i++){ 
                var _span = _spans[i]; 
                if(_span.getAttribute("value")===value){ 
                    var _li = $(_span.parentNode); 
                    _li.addClass("active"); 
                } 
            } 
        } 
        this.active = active; 
        return this; 
    } 
})(jQuery);

调用实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <link rel="stylesheet" href="style.css" type="text/css"> 
    <script src="http://localhost/jquery/jquery-1.8.3.js"></script> 
    <script src="jquery.custom.timeline.js"></script> 
    <script> 
        var data = [{"label":"2011年","value":"2011"}, 
            {"label":"2012年","value":"2012"}, 
            {"label":"2013年","value":"2013"} 
        ]; 
        $(function(){ 
            var timelinehor = $("#timelinehor").TimeLine({ 
                data:data, 
                vertical:false 
            }); 
            timelinehor.active(data[0].value); 
            var timelinevec = $("#timelinevec").TimeLine({ 
                data:data, 
                vertical:true 
            }); 
            timelinevec.active(data[0].value); 
        }); 
    </script> 
</head> 
<body> 
<div id="timelinehor"></div><br><br><br> 
<div id="timelinevec"></div> 
</body> 
</html>

看官赏点饭钱可好？

jquery实现的时间轴的更多相关文章

  1. 基于jQuery发展历程时间轴特效代码

    分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="time ...

  2. 基于jQuery的美食时间轴焦点图插件

    这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换.另外,在图片上方也可以放置自定义样式的文字. 在线预 ...

  3. Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果

    Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果 在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一 ...

  4. 推荐5款实用的jQuery时间轴插件

    1.使用CSS3和jQuery制作的水平时间轴 这是一个可以在PC和移动端表现非常棒的水平时间轴,它由上部水平滑块和下部时间点对应的内容区块,点击时间轴上的时间点,下部内容会滑动到对应的内容区块.使用 ...

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

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

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

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

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

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

  8. jQuery时间轴插件：jQuery Timelinr

    前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...

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

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

随机推荐

  1. android系统权限的管理

    被权限搞了好久,决定好好的研究一下: 参考资料 http://blog.csdn.net/xieyan0811/article/details/6083019?reload http://blog.c ...

  2. IOS Masonry自动布局

    之前项目用Frame布局,这个项目登录用了VFL,后来觉得用Masonry,前天布局TableViewCell时用了下 ,觉得还不错. #import "Masonry.h" #i ...

  3. JS实现图的创建和遍历

    图分为无向图和有向图 图的存储结构有邻接矩阵.邻接表.十字链表.邻接多重表这四种,最常用的是前两种 本篇主要是利用邻接矩阵实现无向图的创建和遍历(深度优先.广度优先),深度优先其实就是二叉树里的前序遍 ...

  4. 记一次线上Mysql数据库 宕机

    从发现问题,到最后解决一共消耗两个半小时(7:30~10:00),报警电话16通,警察坐镇,未完待续 ......

  5. bnu 4060 奇偶性，异或运算

    Plants vs. Zombies Time Limit: 5000ms Memory Limit: 2048KB   64-bit integer IO format: %lld      Jav ...

  6. 使用 NamedScope 扩展 Ninject 的 InRequestScope

    背景 C#,Ninject,定期执行某计划任务.首先想到的是使用 Quartz 来安排计划任务,于是看是否有相应的集成.果然有:https://github.com/dtinteractive/Nin ...

  7. git 远程代码回退

    git reflog git reset --hard commitId git push -f

  8. java中的>>>和>>>=

    “>>>”运算符所作的是无符号的位移处理,它不会将所处理的值的最高位视为正负符号,所以作位移处理时,会直接在空出的高位填入0.当我们要作位移的原始值并非代表数值时(例如:表示颜色图素 ...

  9. react项目 路径优化

  10. 微服务架构之spring cloud ribbon

    现在负载均衡是通用的解决分压的技术方案,实现方式一般分为服务端或者客户端,服务端大部分是使用中间件实现,spring cloud ribbon 是一个客户端负载均衡组件.跟spring cloud e ...