代码

样式文件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. [译]用R语言做挖掘数据《四》

    回归 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou,密码shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到程序: 1. ...

  2. [转]OPEN(SAP) UI5 学习入门系列之一：扫盲与热身（上）

    本文转自:http://www.cnblogs.com/qianmarv/p/4671394.html 1 扫盲 什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念 ...

  3. 【转】Java面试题全集（上）

    准备从C#转java,在找工作之前准备看看面试题,有幸看到大神的作品,mark一下,以后慢慢看... 2013年年底的时候,我看到了网上流传的一个叫做<Java面试题大全>的东西,认真的阅 ...

  4. Metronic 对话 chat

    http://keenthemes.com/preview/metronic/theme/admin_1/index.html: jquery让滚动条默认在最底部:$('#content').scro ...

  5. VPS虚拟化架构OpenVZ、KVM、Xen、Hyper-V的区别

    1.OpenVZ OpenVZ(简称OVZ)采用SWsoft的Virutozzo虚拟化服务器软件产品的内核,是基于Linux平台的操作系统级服务器虚拟化架构.这个架构直接调用宿主机(俗称:母机)中的内 ...

  6. CenOs7安装oracle图文详细过程（02）

    原创作品,转载请在文章头部(显眼位置)注明出处:https://www.cnblogs.com/sunshine5683/p/10011574.html 8.修改用户限制 vim /etc/secur ...

  7. python Django 路由之正则表达式

    一.路由系统,URL 1. url(r'^index',views.index) #默认的                  url(r'^home',views.Home.as_view()) # ...

  8. 【一些简单的jQuery选择器】

    学习[js DOM 编程艺术],最后面有许多jQuery的选择器,每个都动手敲了一遍. jQuery 提供了高级选择器的方法. js获取元素的三个基本方法分别是通过标签名,类名和id,即(getEle ...

  9. web前端面试题（持续更新）

    此文是我本人在面试的时候遇到的问题和一些同学遇到的问题加资料上面的问题的总结.(将会持续更新,因为未有满意工作) 面试时有几点需要注意: 1.面试题目:根据你的等级和职位的变化,入门级到大神级,广度和 ...

  10. 使用PuTTy在CentOS下安装web.py与简单的文件传输

    两周前,出于帮朋友忙的目的,尝试了一下微信公众号的菜单自定义与自动回复功能的实现,成了. 两周后,需要将代码转移至朋友新购的服务器上,发现基本操作全忘记了,麻瓜!所以记一笔,希望也能对大家也有帮助. ...