鱼骨时间轴案例

http://www.jqueryfuns.com/resource/2173（以上截图demo地址）

下面的代码类似以上效果：

$.fn.fishBone = function(data) {var colors = ['#F89782','#1A84CE'];/**入口*///1.创建dom$(this).children().remove();$(this).append(creataFishBone(data));//2.自适应var rowcount = fixWindow();//3.翻页滚动效果jQuery(".fishBone").slide({titCell: ".hd ul",mainCell: ".bd>ul",autoPage: true,effect: "left",autoPlay: false,scroll: rowcount,vis: rowcount});/**自适应 平均分布*/function fixWindow() {//item所占的宽度 = 自身宽度+marginleftvar item = $(".fishBone .bd .item");var marginleft = parseInt(item.css('margin-left'))var item_w = item.width() + marginleft;//显示区域var bd_w = $(".fishBone .bd").width();//能显示的个数 取整var rowcount = parseInt(bd_w / item_w);if (rowcount > item.size()) {//rowcount = item.size();$(".fishBone .prev,.fishBone .next").hide()}//设置新的宽度使其平均分布var item_w_temp = bd_w / rowcount - marginleft;item.width(item_w_temp);return rowcount;};/**li左边框线颜色 border-left-color 动态获取*/function getColor(i) {var length = colors.length;var color = 'gray';if (i <= length - 1) {color = colors[i];} else {color = colors[i % length];}return color;};/**轴线上圆点位置纵坐标，见图片line-point.png*/function getLinePointY(i) {var length = colors.length;var y = 0;if (i <= length - 1) {y = -i * 20;} else {y = -(i % length) * 20;}return y + "px";};/**第一行日期圆点位置纵坐标，图片line-first.png*/function getLineFirstY(i) {var length = colors.length;var y = 0;if (i <= length - 1) {y = -i * 60;} else {y = -(i % length) * 60;}return y + "px";};/** .title-left背景纵坐标，0px开始，见图片title.png*/function ge