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

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

$.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 = $("<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/bottom var 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;
}
});
}
04-30 21:29