代码

样式文件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. 从零开始学JAVA(08)-使用SpringMVC4 Restful 风格引用静态文件 css/js/png

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

  2. iOS开源项目周报0302

    由OpenDigg 出品的iOS开源项目周报第十期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等.TodayMin ...

  3. vmware创建centos虚拟机

    下载centos 安装之前你需要下载centos镜像:http://mirrors.aliyun.com/ 创建虚拟机 如果还没有安装vmware请参考:https://www.cnblogs.com ...

  4. CentOS 7重装mysql8.0.15

    查看是否安装有mysql rpm -qa | grep mysql 有的话先删除干净 下载MySQL yum源 wget https://dev.mysql.com/get/mysql80-commu ...

  5. 高并发系列之——MQ消息中间件Kafka

    1.前言 1.1 包路径和源码 下载链接 基于发布订阅的分布式消息系统,使用scala语言编写. 特点:采用分区机制,每个分区可以放到不同的服务器上,提高了吞吐率,同时基于磁盘存储,以及副本机制可以确 ...

  6. 面试遇到的mysql面试题

    1.MySQL数据库有哪些内置函数?1.数学函数 2.字符串函数 3.日期和时间函数 4.条件判断函数5.系统信息函数 6.加密和压缩函数 7.聚合函数8.格式或类型转化函数. 2.如何返回一张表的数 ...

  7. Java基础之java的四大特性

    上篇文章说了jdk的安装和java环境的配置,这篇文章主要说下java的特性. 首相说下,编程语言分为面向过程和面向对象,而java就是一种面向对象的编程语言. 什么是面向过程编程呢?就是一流程为单位 ...

  8. 设计模式入门,策略模式,c++代码实现

    // test01.cpp : Defines the entry point for the console application.////第一章,设计模式入门,策略模式#include &quo ...

  9. js for循环中点击事件中无法获取每一个i值的问题

    好像是第二次遇到这个问题,必须要总结一下!! <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  10. MPU/SoC/Application Processor/Embedded OS

    Everything has its principles and mechanisms which are designed by its creator and followed by its u ...