动态绘制鼠标悬浮框

var FloatWin_t = 0;//防止onmouseover执行多次
var floatAttribuInfo = new Array();//房源归属信息
var floatPFInfo = new Array();//房源精耕信息
var FloatWin_b = 0;//判断数组中是否包含对应数据
var FloatWin_Hid = 0;
function FloatInfoById(houseId, e) {
    FloatWin_Hid = houseId
    if (floatAttribuInfo.length <= 0 || floatPFInfo.length <= 0) {//首次加载
        ajaxFloatInfo(e);
    }
    else {//非首次加载
        FloatWin_b = 0;
        for (var i = 0; i < floatAttribuInfo.length; i++) {//查询数组中是否有包含对应的悬浮窗信息
            if (houseId == floatAttribuInfo[i][0].houseId && FloatWin_t == 0) {
                var descDiv = document.createElement('div');//首先创建div
                document.body.appendChild(descDiv);
                var cssStr = "display:none; position:fixed;float:left;border:2px solid #7ca1ae;border-radius:10px;background-color:#fff;";//给div设置样式，比如大小、位置               
                descDiv.style.cssText = cssStr;//将样式添加到div上，显示div
                descDiv.id = 'tip';
                var divT = document.createElement('table'); // 新增元素
                var cssStr2 = "height:auto;max-width :400px;margin:10px;";
                divT.style.cssText = cssStr2;//将样式添加到div上，显示div
                divT.id = 'tb_infolist';
                descDiv.appendChild(divT);
                var table = document.getElementById("tb_infolist");
                oneRow = table.insertRow();//插入一行 
                cell1 = oneRow.insertCell();//单单插入一行是不管用的，需要插入单元格
                cell2 = oneRow.insertCell();
                cell3 = oneRow.insertCell();
                cell1.innerHTML = "<span style='font-weight:bolder'>" + floatAttribuInfo[i][0].clientPerInfo + "</span>";
                cell2.innerHTML = "<span style='text-align:center'>  </span>";
                cell3.innerHTML = "<span style='font-weight:bolder'>" + floatAttribuInfo[i][0].clientTime + "</span>";
                cell1.style.height = "35px ";
                cell3.style.height = "35px ";
                cell3.width = "80px";
                cell3.align = "center ";
                FloatWin_b = 1;
            }
            if (houseId == floatPFInfo[i][0].houseId) {
                if (floatPFInfo[i].length > 0 && FloatWin_t == 0) {
                    oneRow = table.insertRow();//插入一行
                    cell1 = oneRow.insertCell();//单单插入一行是不管用的，需要插入单元格
                    cell2 = oneRow.insertCell();
                    cell3 = oneRow.insertCell();
                    cell1.innerHTML = "<span style='font-weight:bolder'>精耕内容</span>";
                    cell2.innerHTML = "<span style='text-align:center'></span>";
                    cell3.innerHTML = "<span style='font-weight:bolder'>精耕时间</span>";
                    cell1.align = "center ";
                    cell3.align = "center ";
                    cell1.style.height = "10px ";
                    cell3.style.height = "10px ";
                    cell3.width = "80px ";

                    for (var j = 0; j < floatPFInfo[i].length; j++) {
                        oneRow = table.insertRow();//插入一行
                        cell1 = oneRow.insertCell();//单单插入一行是不管用的，需要插入单元格
                        cell2 = oneRow.insertCell();
                        cell3 = oneRow.insertCell();
                        if (floatPFInfo[i][j].remark.length>90) {
                            cell1.innerHTML = floatPFInfo[i][j].remark.substring(0, 89) + "..."
                        } else {
                            cell1.innerHTML = floatPFInfo[i][j].remark;
                        }
                        cell2.innerHTML = "<span style='text-align:center'>  </span>";
                        cell3.innerHTML = "<span style='text-align:center'>" + floatPFInfo[i][j].addtime + "</span>";

                        cell1.style.height = "10px ";
                        cell3.style.height = "10px ";
                        cell3.align = "center ";
                    }
                    FloatWin_t = 1;
                }
                showFloat(e);//显示浮窗
                FloatWin_t = 0;
            }
        }
        if (FloatWin_b < 1) {//数组中没有相应记录
            ajaxFloatInfo(e);
        }
    }

    //数组中没有相应记录
    function ajaxFloatInfo(e) {
        $.ajax({
            url: '/House/HouseInfo/GetInfoById',
            type: "post",
            data: { Id: houseId },
            success: function (ds) {
                floatAttribuInfo.push(ds[0]);
                floatPFInfo.push(ds[1]);

                var descDiv = document.createElement('div');//首先创建div
                document.body.appendChild(descDiv);
                var cssStr = "display:none; position:fixed;float:left;border:2px solid #7ca1ae;border-radius:10px;background-color:#fff";//给div设置样式，比如大小、位置               
                descDiv.style.cssText = cssStr;//将样式添加到div上，显示div
                descDiv.id = 'tip';
                var divT = document.createElement('table'); // 新增元素
                var cssStr2 = "height:auto;max-width :400px;margin:10px";
                divT.style.cssText = cssStr2;//将样式添加到div上，显示div
                divT.id = 'tb_infolist';
                descDiv.appendChild(divT);
                var table = document.getElementById("tb_infolist");
                oneRow = table.insertRow();//插入一行
                cell1 = oneRow.insertCell();//单单插入一行是不管用的，需要插入单元格
                cell2 = oneRow.insertCell();
                cell3 = oneRow.insertCell();
                cell1.innerHTML = "<span style='font-weight:bolder'>" + ds[0][0].clientPerInfo + "</span>";
                cell2.innerHTML = "<span style='text-align:center'>  </span>";
                cell3.innerHTML = "<span style='font-weight:bolder;'>" + ds[0][0].clientTime + "</span>";
                cell1.style.height = "35px ";
                cell3.width = "80px ";
                if (ds[1].length > 0 && FloatWin_t == 0) {
                    oneRow = table.insertRow();//插入一行
                    cell1 = oneRow.insertCell();//单单插入一行是不管用的，需要插入单元格
                    cell2 = oneRow.insertCell();
                    cell3 = oneRow.insertCell();
                    cell1.innerHTML = "<span style='font-weight:bolder'>精耕内容</span>";
                    cell2.innerHTML = "<span style='text-align:center'>  </span>";
                    cell3.innerHTML = "<span style='font-weight:bolder'>精耕时间</span>";
                    cell1.align = "center ";
                    cell3.align = "center ";
                    cell1.style.height = "10px ";
                    cell3.style.height = "10px ";
                    for (var i = 0; i < ds[1].length; i++) {
                        oneRow = table.insertRow();//插入一行
                        cell1 = oneRow.insertCell();//单单插入一行是不管用的，需要插入单元格
                        cell2 = oneRow.insertCell();
                        cell3 = oneRow.insertCell();
                        if (ds[1][i].remark.length>90) {
                            cell1.innerHTML = ds[1][i].remark.substring(0, 89)+"..."
                        } else {
                            cell1.innerHTML = ds[1][i].remark;
                        }
                        cell2.innerHTML = "<span style='text-align:center'>  </span>";
                        cell3.innerHTML = "<span style='text-align:center'>" + ds[1][i].addtime + "</span>";
                        cell1.style.height = "10px ";
                        cell3.style.height = "10px ";
                        cell3.align = "center ";
                    }
                    FloatWin_t = 1;
                }
                showFloat(e);//显示浮窗
                FloatWin_t = 0;
            }
        });
    }
}
//鼠标离开事件
function removeFloat() {
    FloatWin_t = 0;
    $('#tip').remove();
}
//显示浮窗
function showFloat(e) {
    if (FloatWin_t == 1) {
        if ($("#tb_infolist").find("tr").length > 5) {
            removeFloat();
            FloatInfoById(FloatWin_Hid, e);
        } else {
            $("span[name='houseView']").mousemove(function (e) {
                $('#tip').eq($(this).index()).show().css({
                    "top": e.clientY - 150,
                    "left": e.clientX + 60
                });
            });
        }
    }
}