jquery实现的时间轴

代码

样式文件style.css

.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

(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);

调用实现

<!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>

看官赏点饭钱可好？

转载于:https://www.cnblogs.com/telwanggs/p/5306270.html

jquery实现的时间轴相关推荐

html时间轴横向自动播放,利用jQuery实现日期时间轴自动播放代码
特效描述:利用jQuery实现日期时间轴自动播放代码.利用jQuery实现日期时间轴自动播放代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码渲染未完成延迟动画渲染完成继续动 ...
通过jquery实现动态时间轴
通过jquery实现动态时间轴可以按照小时和天数进行逐时逐日的移动具体代码见:https://download.csdn.net/download/u012832088/10579994
推荐5款实用的jQuery时间轴插件
1.使用CSS3和jQuery制作的水平时间轴这是一个可以在PC和移动端表现非常棒的水平时间轴,它由上部水平滑块和下部时间点对应的内容区块,点击时间轴上的时间点,下部内容会滑动到对应的内容区块.使用 ...
js写的几款时间轴
1.使用CSS3和jQuery制作的水平时间轴这是一个可以在PC和移动端表现非常棒的水平时间轴,它由上部水平滑块和下部时间点对应的内容区块,点击时间轴上的时间点,下部内容会滑动到对应的内容区块.使用 ...
分享66个JS时间轴特效，总有一款适合您
分享66个JS时间轴特效,总有一款适合您 66个JS时间轴特效下载链接:https://pan.baidu.com/s/1DD8EqIZjsmzpRB0pHkzUdg?pwd=pgw4 提取码:pg ...
jQuery时间轴特效
一 timelinr 图图: 码码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...
jQuery时间轴插件：jQuery Timelinr
这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. 查看演 ...
纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！...
前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...
Jquery实现超酷的时间轴特效
原文:Jquery实现超酷的时间轴特效源代码下载地址:http://www.zuidaima.com/share/1607123657378816.htm

jquery实现的时间轴

jquery实现的时间轴相关推荐

最新文章

热门文章