代码

样式文件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. 【转】IIS网站浏览时提示需要用户名密码登录-解决方法

    打开iis,站点右键----属性----目录安全性----编辑----允许匿名访问钩选 IIS连接127.0.0.1要输入用户名密码的解决办法原因很多,请尝试以下操作: 1.查看网站属性——文档看看启 ...

  2. Docker学习之基本概念

    Docker学习之基本概念 作为一个后端noder,不了解docker有点说不过去,这节开始,学习一些docker层面的东西. 什么是docker Docker最初是dotCloud公司创始人Solo ...

  3. 京东-Java开发工程师-一面

    时间:2017-4-7 16:47 时长:32分19秒 类型:笔试前电话面试 之前打过一个电话过来说了一声,下午就直接打过来面试了,没有自我介绍貌似 1. 你做的这些东西是什么样的? 2. 选一个你觉 ...

  4. 访问Django项目出现DisallowedHost at / Invalid HTTP_HOST header问题

    闲来无事,想玩玩django,源码安装碰到了一堆乱七八糟依赖性问题,耗费一下午的时间总算是在ubuntu14.04上搭建好了python3+django2开发环境, 心血来潮,创建了一个django项 ...

  5. ASP.NET 解决在点击Button执行服务器事件之前验证用户输入并阻塞

    在网站项目开发时,为了减少用户的错误性的操作,很多时候我们都需要做一些必要的JS验证来提醒用户,比如:“输入的值不符合规则,请重新输入”.“提交后无法修改,您确定要继续吗?”友好性的提示. 这时候我们 ...

  6. ASP.NET Button控件的UseSubmitBehavior属性引发的血案

    这里先不说标题上的UseSubmitBehavior属性是什么,先说下面这种情况. 通常,在我们写一个表单页面的时候,最下方会有“提交”和“返回”字样的两个按钮.顾名思义,它们的功能大家都知道,但是一 ...

  7. 十四、curator recipes之DistributedAtomicLong

    简介 和Java的AtomicLong没有太大的不同DistributedAtomicLong旨在分布式场景中维护一个Long类型的数据,你可以像普通单机环境一样来使用它. 官方文档:http://c ...

  8. 八、curator recipes之选举主节点LeaderSelector

    简介 前面我们看到LeaderLatch对于选举的实现:https://www.cnblogs.com/lay2017/p/10264300.html 节点在加入选举以后,除非程序结束或者close( ...

  9. Java编程基础知识总结大全（Ⅱ）

    7.类型转换 精度从高到低 double float long int short(char) byte (1)自动类型转换 将一个低精度---高精度 (2)强制类型转换 将一个高精度---低精度 ...

  10. vi 多行注释和取消注释

    注释 :1,10 s/^/#/   注释1到10行 取消注释 ctl+v 进入visual block模式 选中 #号 按d 或x 将其删除