jQuery横向上下排列鱼骨图形式信息展示代码时光轴样式（转自CSDN,原文链接附于文中）...

原文链接：http://www.jqueryfuns.com/resource/2173

$.fn.fishBone = function(data) {var colors = ['#F89782', '#1A84CE', '#F7A259', '#43A6DA', '#F9BF3B','#88C7CC','#EF6D5F','#60A96E','#F03852','#3A9284'];/**入口*///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 getTitleLeftY(i) {var length = colors.length;var y = 0;//图片位置if (i <= length - 1) {y += -i * 60;} else {y += -(i % length) * 60;}return y + "px";};/** .title-center背景纵坐标，600px开始，见图片title.png*/function getTitleCenterY(i) {var length = colors.length;var y = -598;//图片位置if (i <= length - 1) {y += -i * 60;} else {y += -(i % length) * 60;}return y + "px";};/**.title-right背景纵坐标，1200px开始，见图片title.png*/function getTitleRightY(i) {var length = colors.length;var y = -1200;//图片位置if (i <= length - 1) {y += -i * 60;} else {y += -(i % length) * 60;}return y + "px";};/**创建dom结构*/function creataFishBone(data) {var fishBone = $("<div class='fishBone'/>");var wrapper = $("<div class='wrapper'></div>");var bd = $("<div class='bd'></div>");var ul_item = $("<ul/>");//遍历数据$(data).each(function(index) {var itemclass=itemClass(index);//显示在轴上方或下方标识 top/bottomvar color = getColor(index);var lineFirstY = getLineFirstY(index);var titleLeftY = getTitleLeftY(index);var titleCenterY = getTitleCenterY(index);var titleRightY = getTitleRightY(index);var ul = $("<ul></ul>");//遍历封装属性//封装审理时间和案号if(itemclass=='top'){$.each(this, function(name, value) {if (name == '审理时间') {var li = $("<li class='line-first'>" + value + "</li>").css('background-position-y', (parseInt(lineFirstY)+9)+"px");//9是原计算结果的偏移量，显示位置正合适li.appendTo(ul);return;}});$.each(this, function(name, value) {if (name == '案号') {var li = $("<li class='title'></li>");var titleLeft =  $("<span class='title-left'> </span>").css('background-position-y',titleLeftY);var titleCenter =  $("<span class='title-center'>"+value+"</span>").css('background-position-y',titleCenterY);var titleRight =  $("<span class='title-right'> </span>").css('background-position-y',titleRightY);li.append(titleLeft).append(titleCenter).append(titleRight);li.appendTo(ul);return;}});}