代码

样式文件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. vue 获取数据联动下拉框select ，并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误

    公司项目中遇到一个问题,联动下拉框,并且数据是使用vue-resource从后台获取的,格式不利于输出联动下拉框,联动下拉框是第一个下拉框输出一个数组里每一项json的一个text值,从而第二下拉框输 ...

  2. 从零开始学JAVA(08)-使用SpringMVC4 Restful 风格引用静态文件 css/js/png

    在写完helloworld后想给网页加点样式(*.css),结果怎么也显示不了,百度了很多种方法后试行尝试,试验成功并记录下来,方便以后查看. 时隔两年,继续学习JAVA,太久没学了,忘记得差不多,还 ...

  3. MySQL---6、可视化工具工具之SQLYog安装配置

    一.安装文件包下载 https://pan.baidu.com/share/link?shareid=4149265923&uk=724365661&fid=2642450782 二. ...

  4. C# 多维数组

    int[, ,] shuzu = new int[4, 3, 2]; //有四个二维数组,每个二维数组里面有3个1维数组,每个1维数组里面有2个元素

  5. ecstore关于smarty语法调用

    以下是smarty语法 转自http://www.phpwindow.com/ecstore_smarty2.html assign 属性 类型 是否必须 描述 var string yes 被赋值的 ...

  6. 小程序异步处理demo计时器setInterval()

    实现一个计时器/秒 其实就是要求对某字段每秒执行一次更新 这里用到了官方给的定时器 官方API 每秒刷新一次,所以用setInterval()方法 下面给出关键代码: 由于无关代码过多,这里尽可能贴出 ...

  7. JavaScript & jQuery & Bootstrap

    一.前言 javascript 简称 JS  与java编程语言 没有什么关系 JavaScript: {核心(ECMAScript) 文档对象模型(DOM) Document object mode ...

  8. BZOJ1492 [NOI2007]货币兑换

    Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券(以下 简称B券).每个持有金券的顾客都有一个自己的帐户.金券的数目可以是一个 ...

  9. js获取昨天/上周/上个月开始和结束的时间戳，可以设置时分秒 js obtain start and end timestamp of yesterday/last week/last month, with set of hour/minute/second

    //obtain timestamp of last week var now=new Date() var nowDayOfWeek = now.getDay(); //今天本周的第几天 var n ...

  10. <pre> <textarea> <code>标签区别

    这篇文章里面放的大都是我自己写程序的时候遇到的一些小问题,其实都是自己没有掌握的点,别人看起来应该很简单啦,但写下来能提醒自己,也能鼓励一下自己,这条路也不好走哇. <pre> <t ...