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

Posted 2021-01-16 jjsunyet

原文链接：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所占的宽度 = 自身宽度+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;
                    }
                });
            }