- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
仍在尝试回答this question ,我想我终于找到了解决方案,但它运行得太慢了。
var $div = $('<div>')
.css({ 'border': '1px solid red', 'position': 'absolute', 'z-index': '65535' })
.appendTo('body');
$('body *').live('mousemove', function(e) {
var topElement = null;
$('body *').each(function() {
if(this == $div[0]) return true;
var $elem = $(this);
var pos = $elem.offset();
var width = $elem.width();
var height = $elem.height();
if(e.pageX > pos.left && e.pageY > pos.top
&& e.pageX < (pos.left + width) && e.pageY < (pos.top + height)) {
var zIndex = document.defaultView.getComputedStyle(this, null).getPropertyValue('z-index');
if(zIndex == 'auto') zIndex = $elem.parents().length;
if(topElement == null || zIndex > topElement.zIndex) {
topElement = {
'node': $elem,
'zIndex': zIndex
};
}
}
});
if(topElement != null ) {
var $elem = topElement.node;
$div.offset($elem.offset()).width($elem.width()).height($elem.height());
}
});
它基本上遍历页面上的所有元素并找到光标下方的最顶层元素。
有没有什么方法可以使用四叉树或其他东西来分割页面以便循环运行得更快?
最佳答案
Is there maybe some way I could use a quad-tree or something and segment the page so the loop runs faster?
退后一步,意识到问题有多小,你越努力尝试,你会使用越复杂的答案。
现在您需要做的是为突出显示创建 4 个元素。它们将形成一个空方 block ,因此您的鼠标事件可以自由触发。这类似于 overlay example我做了。
不同之处在于您只需要四个元素(没有调整大小标记),并且 4 个框的大小和位置有点不同(模仿红色边框)。然后你可以在你的事件处理程序中使用 event.target
,因为它默认获取真正的最顶层元素。
另一种方法是隐藏exra元素,获取elementFromPoint
,计算后放回去。
它们比光还快,我可以告诉你。甚至爱因斯坦也会同意 :)
1.) elementFromPoint 覆盖/边框 - [ Demo1 ] FF 需要 v3.0+
var box = $("<div class='outer' />").css({
display: "none", position: "absolute",
zIndex: 65000, background:"rgba(255, 0, 0, .3)"
}).appendTo("body");
var mouseX, mouseY, target, lastTarget;
// in case you need to support older browsers use a requestAnimationFrame polyfill
// e.g: https://gist.github.com/paulirish/1579671
window.requestAnimationFrame(function frame() {
window.requestAnimationFrame(frame);
if (target && target.className === "outer") {
box.hide();
target = document.elementFromPoint(mouseX, mouseY);
}
box.show();
if (target === lastTarget) return;
lastTarget = target;
var $target = $(target);
var offset = $target.offset();
box.css({
width: $target.outerWidth() - 1,
height: $target.outerHeight() - 1,
left: offset.left,
top: offset.top
});
});
$("body").mousemove(function (e) {
mouseX = e.clientX;
mouseY = e.clientY;
target = e.target;
});
2.) 鼠标悬停边框 - [ Demo2 ]
var box = new Overlay();
$("body").mouseover(function(e){
var el = $(e.target);
var offset = el.offset();
box.render(el.outerWidth(), el.outerHeight(), offset.left, offset.top);
});
/**
* This object encapsulates the elements and actions of the overlay.
*/
function Overlay(width, height, left, top) {
this.width = this.height = this.left = this.top = 0;
// outer parent
var outer = $("<div class='outer' />").appendTo("body");
// red lines (boxes)
var topbox = $("<div />").css("height", 1).appendTo(outer);
var bottombox = $("<div />").css("height", 1).appendTo(outer);
var leftbox = $("<div />").css("width", 1).appendTo(outer);
var rightbox = $("<div />").css("width", 1).appendTo(outer);
// don't count it as a real element
outer.mouseover(function(){
outer.hide();
});
/**
* Public interface
*/
this.resize = function resize(width, height, left, top) {
if (width != null)
this.width = width;
if (height != null)
this.height = height;
if (left != null)
this.left = left;
if (top != null)
this.top = top;
};
this.show = function show() {
outer.show();
};
this.hide = function hide() {
outer.hide();
};
this.render = function render(width, height, left, top) {
this.resize(width, height, left, top);
topbox.css({
top: this.top,
left: this.left,
width: this.width
});
bottombox.css({
top: this.top + this.height - 1,
left: this.left,
width: this.width
});
leftbox.css({
top: this.top,
left: this.left,
height: this.height
});
rightbox.css({
top: this.top,
left: this.left + this.width - 1,
height: this.height
});
this.show();
};
// initial rendering [optional]
// this.render(width, height, left, top);
}
关于javascript - 如何使用覆盖有效地突出显示鼠标光标下的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4711023/
我收到未知数据,我想以编程方式查看相关性,并将所有完全相关的变量组合在一起(忽略方向)。在下面的数据集中,我可以手动查看相关性并说 a, f, g, h一起去吧b, d, e .我怎样才能以编程方
这个问题在这里已经有了答案: use dplyr's summarise_each to return one row per function? (3 个答案) 关闭 4 年前。 作为探索性工作的
我想要完成的是使用数组存储未知大小的多项式。我在互联网上看到的是使用一个数组,每个单元格都包含系数,度数是单元格编号,但这不是有效的,因为如果我们有一个多项式,如:6x^14+x+5。这意味着我们将从
嘿伙计们,我一直在尝试解析 HTML 文件以从中抓取文本,但时不时地,我会得到一些非常奇怪的字符,例如 à€œ。我确定是“智能引号”或弯头标点符号导致了我的所有问题,因此我的临时修复是搜索所有这些字符
我原来的 data.table 由三列组成。 site、observation_number 和 id。 例如以下是 id = z 的所有观察结果 |site|observation_number|i
"Premature optimisation is the root of all evil (but it's nice to have once you have an ugly solutio
给定这个数组 X: [1 2 3 2 3 1 4 5 7 1] 和行长度数组R: [3 2 5] 表示转换后每行的长度。 我正在寻找一个计算效率高的函数来将 X reshape 为数组 Y: [[ 1
我有一些 data.frame s: # Sample data a <- data.frame(c(1:10), c(11:20)) names(a) <- c("A", "B") b <- dat
我有点困惑。列表擅长任意位置插入,但不善于随机访问? (怎么可能)如果你不能随机访问,你怎么知道在哪里插入? 同样,如果你可以在任何位置插入,为什么你不能从那个位置高效地读取? 最佳答案 如果您已经有
我有一个向量,我想计算它的移动平均值(使用宽度为 5 的窗口)。 例如,如果有问题的向量是[1,2,3,4,5,6,7,8],那么 结果向量的第一个条目应该是 [1,2,3,4,5] 中所有条目的总和
有一个随机整数生成器,它生成随机整数并在后台运行。需求设计一个API,调用时返回当时的簇数。 簇:簇是连续整数的字典顺序。例如,在这种情况下,10,7,1,2,8,5,9 簇是 3 (1,2--5--
我想做的是将一组 (n) 项分成大小相等的组(大小为 m 的组,并且为简单起见,假设没有剩余,即 n 可以被 m 整除)。这样做多次,我想确保同一组中的任何项目都不会出现两次。 为了使这稍微更具体一些
假设我有一些包含类型排列的模板表达式,在本例中它们来自 Abstract Syntax Tree : template
我已经在这方面工作了几天,似乎没有我需要的答案。 由于担心这个被标记为重复,我将解释为什么其他问题对我不起作用。 使用 DIFFLIB for Python 的任何答案都无助于我的需求。 (我在下面描
我正在使用 NumPy 数组。 我有一个 2N 长度向量 D,并希望将其一部分 reshape 为 N x N 数组 C. 现在这段代码可以满足我的要求,但对于较大的 N 来说是一个瓶颈: ``` i
我有一个问题: 让我们考虑这样的 pandas 数据框: Width Height Bitmap 67 56 59 71 61 73 ...
我目前正在用 C 语言编写一个解析器,设计它时我需要的东西之一是一个可变字符串“类”(一组对表示实例的不透明结构进行操作的函数),我将其称为 my_string。 string 类的实例只不过是包装
假设我在 --pandas-- 数据框中有以下列: x 1 589 2 354 3 692 4 474 5 739 6 731 7 259 8 723
我有一个成员函数,它接受另一个对象的常量引用参数。我想 const_cast 这个参数以便在成员函数中轻松使用它。为此,以下哪个代码更好?: void AClass::AMember(const BC
我们目前正在将 Guava 用于其不可变集合,但我惊讶地发现他们的 map 没有方法可以轻松创建只需稍作修改的新 map 。最重要的是,他们的构建器不允许为键分配新值或删除键。 因此,如果我只想修改一
我是一名优秀的程序员,十分优秀!