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

原文地址:https://www.cnblogs.com/jjSunyet/p/9876925.html

时间: 2024-11-08 14:52:15

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

鱼骨图的使用方法

在使用鱼骨图进行讨论整理时候,我们要确定一个讨论主题,这个主题通常是“产品/服务流程”中存在的主要问题或缺陷,或者是流程的关键质量特性.(流程的关键质量特性在前文中讲到过) 这个讨论主题就是鱼骨图的鱼头. 接下来就要画出鱼骨,即讨论造成问题的主要原因.在制造应用中,原因通常分为人员.机器.材料.方法.测量和环六个主要类别,服务质量应用一般包括人员.程序和策略,当然,这是对经验的总结,鱼骨图可以包含希望的调查的任何类型的原因. 最后就是找到鱼刺,在这个环节需要使用头脑风暴激发思路,通过不断问:“为

鱼骨图实践

鱼骨图是日本的管理大师石川馨先生发明出来的,所以又被叫做"石川图".鱼骨图的作用又是为了发现问题的"根本原因",所以石川图又被称之为"因果图". 鱼骨图与我们经常使用的MindManager工具是有异曲同工之妙的,当我们希望对一个问题建立整体的认识的时候,经常会借助MindManager强大的头脑风暴的能力,围绕着一个问题点进行发散与分析. 相对MindManager相比,鱼骨图更加集中于分析影响问题的特性.我们通过头脑风暴找到导致这个问题的因素

jquery横向手风琴效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery横向手风琴效果</title> <style> .solution-item{ position: relative; width:1000px; height:420px; margin:50px auto; overflow: h

基于jQuery图片自适应排列显示代码

基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="max-width:900px;margin:auto;padding:0 10px"> <h3>演示样式一</h3> </div> <div style="max-width:908px;margin:auto;p

jQuery 3D圆盘旋转焦点图 支持鼠标滚轮

之前我们分享过很多炫酷实用的jQuery焦点图插件了,今天介绍的这款jQuery焦点图非常特别,所有图片围成一个圆圈,组成一个立体视觉的圆盘,并且可以旋转选择圆盘中的图片.另外,这款jQuery 3D圆盘旋转焦点图插件还支持鼠标滚轮,可以让你更方便地浏览图片. 在线演示源码下载 接下来分析一下实现这款jQuery 3D焦点图的具体过程和源代码,代码主要由HTML.CSS以及jQuery组成,由于JS的参与,相对比较复杂. HTML代码: <ul id="carousel">

jQuery常用函数-思维导图

百度脑图jQuery常用函数 百度脑图jQuery常用函数

最好用的jquery列表拖动排列(由项目提取)

代码压缩包下载: http://pan.baidu.com/s/1mgxAIy0 代码一预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

jQuery横向手风琴图片滑块

jQuery横向手风琴图片滑块是一款非常不错的jQuery特效横向手风琴图片滑块插件,可以自动播放,也可以鼠标滑过时切换.+ 欢迎喜欢的朋友下载研究 源码下载页:http://www.huiyi8.com/sc/8397.html

jQuery/HTML5响应式焦点图动画应用

详细内容请点击 之前我们分享过不少基于jQuery和HTML5的焦点图动画了,比如这里10款精美实用的jQuery焦点图动画推荐就有不少收集的jQuery焦点图插件,效果非常棒.今天要继续为大家介绍一款jQuery/HTML5响应式焦点图动画插件,它的响应式特性可以让焦点图在移动设备上也有不错的效果.  在线演示源码下载 学习来源:http://www.html5tricks.com/jquery-html5-responsive-slider.html 更多html5内容请点击