0

Image Description

荆文征

Zhidu Inc.


你好,再见

八爪鱼 获取用户鼠标悬浮层级

  • 小酒馆老板
  • /
  • 2017/5/17 14:40:0

公司一直再做新闻聚合,导致我们公司一直在爬取新闻,爬取各种软件的新闻资讯。

后来老板突发奇想,我们不如做一个八抓鱼把…… 那么找了两个同事,预言了一下。那就做吧,之后同时qt开发,紧锣密鼓的展开了。


Image Description
只有强者才懂得斗争,弱者甚至失败都不够资格,他们生来就是被征服的

中途,我们一起聊天的时候,就说到了八抓鱼,是小白用户使用的,所以他们想爬取的内容层级,都是鼠标选中的。所以想做一个鼠标选择dom的js。跟我吐了一会苦水。
那个时候不太忙,再加上那会儿我刚做完 新闻详情页的js,觉的有些经验。立马拍胸脯,我来。就有了接下来的代码。

/**
 * Created by Administrator on 2016/11/2.
 */


/* 方法说明
 * @method 方法名
 * @for 所属类名
 * @param {参数类型} 参数名 参数说明
 * @return {返回值类型} 返回值说明
 */

// window.onload=function(){
//
//     var p = CreateShowDomXmlLabel();
//
//     document.body.onmousemove = function(e) {
//
//         var dom = e.target;
//
//         HandleSuspendViewMethod(dom);
//
//         p.innerText = GetDomObjectAllFatherDomName(dom);
//
//         RemoveSuspendView(); // 移除之前的显示遮挡层
//
//         var div = CreateSuspendView(dom); // 创建现在的遮挡层
//
//         document.body.insertBefore(div,p);
//     }
// }

var p = CreateShowDomXmlLabel();

document.body.onmousemove = function (e) {

    var dom = e.target;

    HandleSuspendViewMethod(dom);

    RemoveSuspendView(); // 移除之前的显示遮挡层

    var div = CreateSuspendView(dom)

    document.body.insertBefore(div, p);

    updateLabelLocationMethod(GetDomObjectAllFatherDomName(dom), div)

}

///  用户当前操作的 dom 结构体
var CurrentDomXML;
/// 用户创建的遮挡层的id 名称
var SuspendViewID = "OddityUISuspendView";

/*
 * 处理用户滑动时间的开始,如果用户更换了鼠标的对象则 进行接下来的操作。否则就直接返回
 * @method HandleSuspendViewMethod
 * @param {HTMLElment} e 用户当前滑动位置的dom结构对象
 */
function HandleSuspendViewMethod(e) {
    if (e == CurrentDomXML) {
        return
    }
    CurrentDomXML = e
};


/* 移除之前创建的 SuspendView
 * @method RemoveSuspendView
 */
function RemoveSuspendView() {
    var removeStr = document.getElementById(SuspendViewID);
    if (removeStr != null) {
        removeStr.parentNode.removeChild(removeStr);
    }
};


//获取控件左绝对位置

function getAbsoluteLeft(o) {
    oLeft = o.offsetLeft
    while (o.offsetParent != null) {
        oParent = o.offsetParent
        oLeft += oParent.offsetLeft
        o = oParent
    }
    return oLeft
}
//获取控件上绝对位置
function getAbsoluteTop(o) {
    oTop = o.offsetTop;
    while (o.offsetParent != null) {
        oParent = o.offsetParent;
        oTop += oParent.offsetTop;
        o = oParent
    }
    return oTop
}

/* 创建遮挡层 根据 传入的 对象的 绝对定位 设置 遮挡层的 位置。以及 遮挡层的 透明度。穿透属性
 * @method CreateSuspendView
 * @param {HTMLElment} e 用户当前滑动位置的dom结构对象
 */
function CreateSuspendView(dom) {
    var div = document.createElement("div");

    div.id = SuspendViewID;

    ///  设置div的 黑色 和透明
    div.style.opacity = 0.4;
    div.style.backgroundColor = "black";

    div.style.display = "block";

    div.style.position = "absolute";

    div.style.borderColor = "red"

    div.style.width = dom.offsetWidth + "px";

    div.style.height = dom.offsetHeight + "px";

    div.style.zIndex = 99999

    div.style.borderStyle = "solid"

    div.style.top = getAbsoluteTop(dom) + "px";
    div.style.left = getAbsoluteLeft(dom) + "px";

    /// 设置鼠标的穿透 效果
    div.style.pointerEvents = "none";

    return div
}

/// 创建 显示 DOM 结构的 Label
function CreateShowDomXmlLabel() {

    var p = document.createElement("p");
    p.innerText = "";
    p.style.textAlign = "center";

    p.style.backgroundColor = "black";
    p.style.lineHeight = "30px";
    p.style.color = "white";
    p.style.opacity = 1;
    p.style.position = "absolute";
    p.style.height = "30px";
    p.style.zIndex = 999991
    p.style.top = "0px";
    /// 设置鼠标的穿透 效果
    p.style.pointerEvents = "none";

    document.body.appendChild(p);

    return p
}

/// 根据传入的 dom 返回 dom 树 字符串
function GetDomObjectAllFatherDomName(dom) {
    var domName = "[ - " + dom.nodeName;
    while (dom.parentNode) {
        domName = dom.parentNode.nodeName + " > " + domName;
        dom = dom.parentNode;
    }
    return domName.toLocaleLowerCase() + " - ]"
}

function updateLabelLocationMethod(str, div) {

    p.innerText = str;

    var topLocation = div.offsetTop-40
    var leftLocation = div.offsetLeft
    if (topLocation < 10) {
        topLocation = div.offsetHeight + div.offsetTop + 10
    }

    p.style.top = topLocation + "px";
    p.style.left = leftLocation + "px";

    return div
}

测试方法,找到任意浏览器,打开开发者模式。在console控制台,复制粘贴这些代码就可以看到效果了。

其实真的是为了凑博客数的……

专栏: web
标签: 八爪鱼 html js Javascript 鼠标悬浮