jquery实现的时间轴

代码
样式文件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实现的时间轴的更多相关文章
- 基于jQuery发展历程时间轴特效代码
分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="time ...
- 基于jQuery的美食时间轴焦点图插件
这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换.另外,在图片上方也可以放置自定义样式的文字. 在线预 ...
- Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果
Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果 在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一 ...
- 推荐5款实用的jQuery时间轴插件
1.使用CSS3和jQuery制作的水平时间轴 这是一个可以在PC和移动端表现非常棒的水平时间轴,它由上部水平滑块和下部时间点对应的内容区块,点击时间轴上的时间点,下部内容会滑动到对应的内容区块.使用 ...
- jquery时间轴幻灯展示源代码
查看效果:http://hovertree.com/texiao/jquery/75/ 源代码下载:http://hovertree.com/h/bjaf/8jlpc2wu.htm 效果图如下: 代码 ...
- JQuery+HTML5+CSS3制作时间轴插件,支持响应式布局
一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...
- 纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!
前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...
- jQuery时间轴插件:jQuery Timelinr
前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...
- [置顶] 纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!
前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...
随机推荐
- vue 获取数据联动下拉框select ,并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误
公司项目中遇到一个问题,联动下拉框,并且数据是使用vue-resource从后台获取的,格式不利于输出联动下拉框,联动下拉框是第一个下拉框输出一个数组里每一项json的一个text值,从而第二下拉框输 ...
- 从零开始学JAVA(08)-使用SpringMVC4 Restful 风格引用静态文件 css/js/png
在写完helloworld后想给网页加点样式(*.css),结果怎么也显示不了,百度了很多种方法后试行尝试,试验成功并记录下来,方便以后查看. 时隔两年,继续学习JAVA,太久没学了,忘记得差不多,还 ...
- MySQL---6、可视化工具工具之SQLYog安装配置
一.安装文件包下载 https://pan.baidu.com/share/link?shareid=4149265923&uk=724365661&fid=2642450782 二. ...
- C# 多维数组
int[, ,] shuzu = new int[4, 3, 2]; //有四个二维数组,每个二维数组里面有3个1维数组,每个1维数组里面有2个元素
- ecstore关于smarty语法调用
以下是smarty语法 转自http://www.phpwindow.com/ecstore_smarty2.html assign 属性 类型 是否必须 描述 var string yes 被赋值的 ...
- 小程序异步处理demo计时器setInterval()
实现一个计时器/秒 其实就是要求对某字段每秒执行一次更新 这里用到了官方给的定时器 官方API 每秒刷新一次,所以用setInterval()方法 下面给出关键代码: 由于无关代码过多,这里尽可能贴出 ...
- JavaScript & jQuery & Bootstrap
一.前言 javascript 简称 JS 与java编程语言 没有什么关系 JavaScript: {核心(ECMAScript) 文档对象模型(DOM) Document object mode ...
- BZOJ1492 [NOI2007]货币兑换
Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券(以下 简称B券).每个持有金券的顾客都有一个自己的帐户.金券的数目可以是一个 ...
- 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 ...
- <pre> <textarea> <code>标签区别
这篇文章里面放的大都是我自己写程序的时候遇到的一些小问题,其实都是自己没有掌握的点,别人看起来应该很简单啦,但写下来能提醒自己,也能鼓励一下自己,这条路也不好走哇. <pre> <t ...