横向轴线 css样式,jQuery横向上下排列鱼骨图形式信息展示代码时光轴样式

$.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所占的宽度 = 自身宽度+marginleft var 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 = $("

" + value + "") .css('background-position-y', (parseInt(lineFirstY)+9)+"px");//9是原计算结果的偏移量，显示位置正合适 li.appendTo(ul); return; } }); $.each(this, function(name, value) { if (name == '案号') { var li = $(""); var titleLeft = $("  ").css('background-position-y',titleLeftY); var titleCenter = $(" "+value+"").css('background-position-y',titleCenterY); var titleRight = $("  ").css('background-position-y',titleRightY); li.append(titleLeft).append(titleCenter).append(titleRight); li.appendTo(ul); return; } }); }